/* Theme Name: Techxou Land Theme URI: https://techxou.com/ Author: Techxou Author URI: https://techxou.com/ Description: Techxou Land is a modern, professional single-page WordPress landing page theme built for IELTS coaching institutes and English language academies. It was developed by Techxou and includes a hero section, why choose us, benefits grid, teacher spotlight, course packages, student reviews, limited seats CTA, FAQs accordion, and footer contact — designed to convert visitors into enrolled students. Includes the Grey Goose template for English academy landing pages. Version: 1.1.0 License: Proprietary License URI: https://techxou.com/license Text Domain: techxouland Tags: ielts, education, landing page, coaching, academy, english, responsive, modern */ /* Theme stylesheet — moved inline styles for the Home template NOTE: This file contains styles moved from `hom.php`'s inline block. */ html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* ── Lenis smooth-scroll (site-wide) ── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } * { box-sizing: border-box; } /* `overflow-x: hidden` here computes overflow-y to `auto`, which makes a scroll container. Every `position: sticky` descendant then resolves against body's scrollport — which never scrolls, since body is height:auto — so sticky silently does nothing site-wide (About scroll-jack, Featured Projects, sticky page headers). `clip` clips the same horizontal overflow without creating a scroll container, so sticky keeps working. `hidden` first = fallback for browsers without `clip` (Safari < 16). */ body { overflow-x: hidden; overflow-x: clip; } /* Font Face Imports */ @font-face { font-family: "Jost"; src: url('asset/images/Jost,Lato/Jost/static/Jost-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: "Jost"; src: url('asset/images/Jost,Lato/Jost/static/Jost-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } /* ========== BASE & UNIVERSAL STYLES ========== */ * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; } .container, section { width: 100%; } /* ========== COMPREHENSIVE RESPONSIVE DESIGN ========== */ /* Mobile First: Extra Small (320px to 480px) */ @media screen and (max-width: 480px) { /* Typography */ h1, h2 { font-size: 22px !important; line-height: 1.3 !important; } h3 { font-size: 18px !important; line-height: 1.4 !important; } h4 { font-size: 16px !important; } h5 { font-size: 14px !important; } p { font-size: 13px !important; line-height: 1.6 !important; } /* Spacing & Padding */ .section-padding { padding: 25px 12px !important; } .py-20 { padding-top: 30px !important; padding-bottom: 30px !important; } .py-52 { padding-top: 25px !important; padding-bottom: 25px !important; } .py-42 { padding-top: 25px !important; padding-bottom: 25px !important; } .py-5 { padding: 12px !important; } .mb-5 { margin-bottom: 15px !important; } .mb-8 { margin-bottom: 20px !important; } .mb-16 { margin-bottom: 25px !important; } .mb-4 { margin-bottom: 12px !important; } .gap-4 { gap: 8px !important; } .gap-5 { gap: 12px !important; } .gap-12 { gap: 12px !important; } /* Grid & Layout */ .md\:grid-cols-2 { grid-template-columns: 1fr !important; } .grid { display: flex !important; flex-direction: column !important; } .md\:grid-cols-5 { grid-template-columns: repeat(2, 1fr) !important; } .row { display: flex !important; flex-wrap: wrap !important; margin-right: -6px; margin-left: -6px; } .col-md-6, .col-md-4, .col-md-3, .col-lg-6, .col-lg-4 { width: 100% !important; padding: 6px !important; } .col-6 { width: 50% !important; } .col-lg-12 { width: 100% !important; flex-direction: column !important; } } /* Some core utilities and components */ .fade-in-up { animation: fadeInUp 0.6s ease forwards; } .image-hover { transition: transform 0.3s ease; } .image-hover:hover { transform: scale(1.05); } .scroll-circle-spinner { animation: spin 8s linear infinite; } .section-padding { padding: 60px 0; } .section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #999; margin-bottom: 10px; } .section-heading { font-size: 46px; font-weight: 500; margin-bottom: 20px; font-family: "Jost", sans-serif; } .btn { border-radius: 5px; font-weight: 600; transition: all 0.3s ease; } .btn-primary { background-color: #667eea; border-color: #667eea; } .btn-primary:hover { background-color: #764ba2; border-color: #764ba2; } .service-card { padding: 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.2); } .service-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 50%; margin-bottom: 15px; font-size: 28px; } .gallery-item { position: relative; overflow: hidden; border-radius: 10px; } .gallery-item img { width: 100%; height: auto; transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.1); } /* Layout constraint */ @media (min-width: 992px) { .container { max-width: 1280px; margin: 0 auto; } } /* Keyframes (kept simple here; original complex animations can be added if needed) */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} } @keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} } /* End of moved styles */ /* Constrain every section's content to a centered max width of 1280px - Sections retain full-bleed backgrounds while their inner content is capped. - Applies to common wrappers used in the template: direct `.container` children inside `section`, `.section-padding`, and utility class `.max-w-7xl`. */ section > .container, section .container, .section-padding > .container, .section-padding .container, .max-w-7xl, .container { max-width: 1280px; margin-left: auto; margin-right: auto; } /* Keep some horizontal breathing room on very small screens */ @media (max-width: 767px) { section > .container, .section-padding > .container, .container { padding-left: 12px; padding-right: 12px; box-sizing: border-box; } } /* Theme metadata was moved to the top of this stylesheet for WordPress compatibility. */ /* Primary menu & dropdown styles (desktop) */ ul li a{ text-decoration: none !important; } #primary-menu { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; align-items: center; } #primary-menu > li { position: relative; } #primary-menu a { color: #ffffff; text-decoration: none; padding: 0.5rem 0.75rem; display: inline-block; transition: color 150ms ease, background 150ms ease; } #primary-menu .menu-item-has-children > a::after { content: "▾"; display: inline-block; margin-left: 8px; font-size: 12px; color: rgba(255,255,255,0.85); } /* Dropdown panel */ #primary-menu .sub-menu { position: absolute; left: 0; top: calc(100% + 0px); background: linear-gradient(180deg, #2b9af3, #1f86d9); border-radius: 14px; padding: 10px 12px; min-width: 200px; box-shadow: 0 10px 30px rgba(4, 21, 40, 0.35); display: none; z-index: 60; }#primary-menu .sub-menu li { display: block; } #primary-menu .sub-menu a { color: #ffffff; padding: 10px 14px; display: block; border-radius: 8px; } #primary-menu .sub-menu a:hover { background: rgba(255,255,255,0.06); } /* show dropdown on hover (desktop) */ #primary-menu li:hover > .sub-menu { display: block; } /* Tweak for deeply nested sub-menus (if present) */ #primary-menu .sub-menu .sub-menu { left: 100%; top: 0; } /* Ensure mobile menu uses default stacking (keeps Tailwind utility classes working) */ @media (max-width: 767px) { #primary-menu { flex-direction: column; gap: 0.5rem; } #primary-menu .sub-menu { position: static; background: transparent; box-shadow: none; padding-left: 1rem; } #primary-menu .sub-menu a { padding: 8px 0; } } /* Small helper to match screenshot spacing on header */ .site-header-spacer { height: 4rem; } /* Menu font styles provided by user */ #primary-menu a, #primary-menu .sub-menu a, #mobile-primary-menu a { background-color: #0c3b65; padding: 9px 14px !important; border-radius: 3px; font-size: 16px; font-weight: 500; line-height: 1.4em; color: var(--e-global-color-white, #ffffff); padding: 14px 20px; } #mobile-primary-menu li { background-color: #0c3b65 !important; padding: 9px 0px !important; border-radius: 3px !important; list-style: none !important; } /* Ensure submenu links keep their rounded hover background when we increase padding */ #primary-menu .sub-menu a { padding-left: 16px; padding-right: 16px; } /* contact */ .wpcf7 label{ width: 100%; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; margin-bottom: 20px; } .wpcf7-submit { background: #2563eb; color: #fff; padding: 12px 30px; border-radius: 6px; font-size: 18px; font-weight: 600; cursor: pointer; } .wpcf7-submit:hover { background: #1d4ed8; } /* Sliding overlay for service cards: slides color from bottom to top on hover */ .service-card-wrap { position: relative; overflow: hidden; } .service-card-wrap img { display: block; width: 100%; height: auto; position: relative; z-index: 2; /* raise image above the background overlay */ } .service-card-wrap .service-card { position: relative; z-index: 3; /* keep text above overlay */ } .service-card-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #3797E4; transform: translateY(100%); transition: transform .45s cubic-bezier(.2,.9,.3,1); z-index: 1; /* put overlay below the service image but above the background */ opacity: 0.95; pointer-events: none; } .service-card-wrap:hover::after, .service-card-wrap:focus-within::after { transform: translateY(0); } .service-icon{ background-color: #2f7eff; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 3px; box-shadow: 0px 1px 3px #42424285; margin-bottom: 15px; } .service-card-wrap:hover .service-card h5, .service-card-wrap:hover .service-card p, .service-card-wrap:hover .service-icon, .service-card-wrap:focus-within .service-card h5, .service-card-wrap:focus-within .service-card p, .service-card-wrap:focus-within .service-icon { color: #fff; } /* Optional subtle image scale on hover */ .service-card-wrap:hover img { transform: scale(1.02); transition: transform .45s ease; } .testimonial-slider { overflow: hidden; } .testimonial-slider .slider-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .testimonial-slider .slider-track::-webkit-scrollbar { display: none; } .testimonial-slider .slider-item { flex: 0 0 100%; scroll-snap-align: center; } @media (min-width: 768px) { .testimonial-slider .slider-item { flex: 0 0 50%; } } @media (min-width: 992px) { .testimonial-slider .slider-item { flex: 0 0 33.3333%; } } /* Reflecting overlay effect for images (image-anime) - Center to diagonal corners shutter style */ figure.image-anime { position: relative; display: block; overflow: hidden; } figure.image-anime img { display: block; width: 100%; height: auto; transition: transform .45s ease; z-index: 1; /* lowered so overlays (::before/::after) can appear above image */ position: relative; } figure.image-anime::before { content: ""; position: absolute; left: 50%; top: 50%; width: 280%; height: 280%; background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, transparent 50%); transform: translate(-50%, -50%) scale(0); z-index: 6; /* ensure overlay sits above the image */ transition: transform .35s cubic-bezier(.34,.1,.64,.1); pointer-events: none; } figure.image-anime::after { content: ""; position: absolute; left: 50%; top: 50%; width: 280%; height: 280%; background: linear-gradient(315deg, rgba(255,255,255,0.9) 0%, transparent 50%); transform: translate(-50%, -50%) scale(0); z-index: 6; /* ensure overlay sits above the image */ transition: transform .35s cubic-bezier(.34,.1,.64,.1); pointer-events: none; } figure.image-anime:hover::before, figure.image-anime:focus::before, figure.image-anime:focus-within::before, figure.image-anime:hover::after, figure.image-anime:focus::after, figure.image-anime:focus-within::after { transform: translate(-50%, -50%) scale(1); } figure.image-anime:hover img, figure.image-anime:focus img { transform: scale(1.03) translateY(-4px); } /* keyboard focus visible outline for accessibility */ figure.image-anime:focus { outline: 3px solid rgba(55,151,228,0.35); outline-offset: 4px; } /* Avoid using ::before/::after on (replaced elements). Use the wrapper `figure.image-anime` pseudo-elements instead. Ensure images that should participate are positioned and display:block. */ img.image-anime, .image-anime img { position: relative; display: block; } /* Services Section Responsive Styles */ .services-title { font-size: 42px; } .services-description { margin-top: 0; } .service-card { padding: 25px 20px; } .service-card-title { font-size: 22px; } .service-image-wrapper { flex-shrink: 0; } /* Tablet Styles (768px - 991px) */ @media (min-width: 768px) and (max-width: 991px) { .services-title { font-size: 36px; } .service-card { padding: 20px 18px; } .service-card-title { font-size: 20px; } .services-gallery { row-gap: 1.5rem !important; } } /* Mobile Styles (max-width: 767px) */ @media (max-width: 767px) { #services .container { padding-left: 1rem; padding-right: 1rem; } #services .section-padding { padding-top: 2rem; padding-bottom: 2rem; } .services-title { font-size: 28px; line-height: 1.3em; } .services-badge-text { font-size: 0.85rem !important; } .services-badge-icon { font-size: 0.9rem !important; } .services-description { font-size: 0.95rem; margin-top: 1rem; } .service-card { padding: 20px 16px; } .service-card-title { font-size: 18px; margin-bottom: 0.75rem; } .service-card-text { font-size: 0.875rem; line-height: 1.5; } .service-icon { width: 36px; height: 36px; margin-bottom: 12px; } .services-gallery { row-gap: 1.25rem !important; } .services-gallery .col-12 { margin-bottom: 0; } } /* Small Mobile Styles (max-width: 575px) */ @media (max-width: 575px) { .services-title { font-size: 24px; } .service-card { padding: 18px 14px; } .service-card-title { font-size: 16px; } .service-card-text { font-size: 0.8rem; } .service-icon { width: 32px; height: 32px; margin-bottom: 10px; } } /* How It Works Section Responsive Styles */ #how-it-works { padding-top: 3rem; padding-bottom: 3rem; } .how-it-works-title { font-size: 42px; } .how-it-works-step-number { font-size: 24px; } .how-it-works-step-title { font-size: 22px; } .how-it-works-image-text { font-size: 72px; left: -20px; top: -20px; } .how-it-works-badge { font-size: 17px; } .badge-circle { width: 44px; height: 44px; font-size: 21px; } /* Tablet Styles (768px - 991px) */ @media (min-width: 768px) and (max-width: 991px) { #how-it-works { padding-top: 2.5rem; padding-bottom: 2.5rem; } .how-it-works-title { font-size: 36px; } .how-it-works-step-number { font-size: 22px; min-width: 44px !important; } .how-it-works-step-title { font-size: 20px; } .how-it-works-image-text { font-size: 60px; left: -15px; top: -15px; } .how-it-works-badge { font-size: 15px; padding: 0.75rem 1rem !important; } .badge-circle { width: 40px; height: 40px; font-size: 19px; } .badge-text { font-size: 0.9rem; } } /* Mobile Styles (max-width: 767px) */ @media (max-width: 767px) { #how-it-works { padding-top: 2rem; padding-bottom: 2rem; } .how-it-works-header { margin-bottom: 2rem !important; } .how-it-works-title { font-size: 28px; line-height: 1.3em; margin-bottom: 0 !important; } .how-it-works-badge-text { font-size: 0.85rem !important; } .how-it-works-badge-icon { font-size: 0.9rem !important; } .how-it-works-badge { font-size: 14px; padding: 0.6rem 0.9rem !important; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 100%; } .badge-circles { margin-right: 8px !important; } .badge-circle { width: 36px; height: 36px; font-size: 16px; } .badge-text { font-size: 0.8rem; white-space: nowrap; } .how-it-works-image-wrapper { margin-bottom: 1.5rem; } .how-it-works-image-text { font-size: 48px; left: -10px; top: -10px; } .how-it-works-steps { margin-top: 0 !important; } .how-it-works-step { margin-bottom: 1.5rem !important; } .how-it-works-step-number { font-size: 20px; min-width: 40px !important; } .how-it-works-step-title { font-size: 18px; margin-bottom: 0.5rem !important; } .how-it-works-step-text { font-size: 0.875rem; line-height: 1.5; } } /* Small Mobile Styles (max-width: 575px) */ @media (max-width: 575px) { #how-it-works { padding-top: 1.5rem; padding-bottom: 1.5rem; } .how-it-works-title { font-size: 24px; } .how-it-works-badge { font-size: 12px; padding: 0.5rem 0.75rem !important; } .badge-circle { width: 32px; height: 32px; font-size: 14px; } .badge-text { font-size: 0.75rem; } .how-it-works-image-text { font-size: 40px; left: -8px; top: -8px; } .how-it-works-step-number { font-size: 18px; min-width: 36px !important; } .how-it-works-step-title { font-size: 16px; } .how-it-works-step-text { font-size: 0.8rem; } .how-it-works-step { margin-bottom: 1.25rem !important; } } /* ========== COMPREHENSIVE PAGE RESPONSIVENESS FIXES ========== */ /* Brands Section Responsive */ #brands { padding: 2rem 0; } .brands-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (min-width: 768px) { .brands-logo-grid { grid-template-columns: repeat(5, 1fr); gap: 2rem; } } .brands-center-badge { width: 190px; height: 190px; margin-top: -45px; } .brands-center-badge-inner { width: 190px; height: 190px; } .brands-center-circle-outer { width: 105px; height: 105px; } .brands-center-circle-inner { width: 84px; height: 84px; } .brands-scroll-svg { width: 130px; height: 130px; } /* Some Facts Section Responsive */ #some-facts { background-attachment: scroll !important; } #some-facts h2 { font-size: 42px; } #some-facts .facts-value { font-size: 40px; } #some-facts .decorative-shape { width: 380px; height: 380px; } /* What We Do Section Comprehensive Responsive Styles */ #what-we-do { padding-top: 3rem; padding-bottom: 3rem; } #what-we-do .container { max-width: 1280px; margin-left: auto; margin-right: auto; } .what-we-do-badge-icon { font-size: 1rem; } .what-we-do-badge-text { font-size: 0.875rem; } .what-we-do-title { font-size: 42px; font-weight: 600; line-height: 1.2em; } .what-service-card { padding: 20px; transition: all 0.3s ease; } .what-service-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .what-service-icon { width: 48px; height: 48px; font-size: 20px; flex-shrink: 0; } .what-service-title { font-size: 22px; font-weight: 700; margin-bottom: 0.5rem; } .what-service-text { font-size: 0.875rem; line-height: 1.5; } .service-support-wrapper { bottom: 0; left: 0; right: 0; } .service-support-badge { padding: 30px; min-width: 150px; } .service-support-value { font-size: 2rem; font-weight: 700; } .service-support-label { font-size: 0.875rem; } /* Our Work Section Responsive */ #our-work h2 { font-size: 42px; } /* Team Member Section Comprehensive Responsive Styles */ #team-member .container { max-width: 1280px; margin-left: auto; margin-right: auto; } .team-member-title { font-size: 42px; font-weight: 600; line-height: 1.2em; } .team-member-image-wrapper { height: 384px; } .team-name { font-size: 20px; font-weight: 700; } .team-role { font-size: 14px; font-weight: 600; } .team-member-content { padding: 1.5rem; } .team-social-icon { width: 44px; height: 44px; } .team-social-icon span { font-size: 18px; } /* Latest Blog Section Responsive */ #latest-blog h2 { font-size: 42px; } /* About Section Comprehensive Responsive Styles */ #about { padding-top: 0rem; padding-bottom: 0rem; } /* About Section - Space between columns on large screens */ @media (min-width: 992px) { #about .row.justify-content-lg-between { justify-content: space-between !important; } #about .row.justify-content-lg-between > .col-lg-5 { flex: 0 0 auto; width: auto; max-width: 48%; } } .about-section-heading { font-size: 46px; } .about-section-text { font-size: 1rem; line-height: 1.6; } .about-feature-title { font-size: 22px; } .about-feature-text { font-size: 0.875rem; line-height: 1.5; } .about-image-wrapper { margin-top: 2rem; } .about-overlay-image { top: -95px; left: -61px; max-width: 259px; } #about .opening-hours-badge { max-width: 280px; padding: 1rem; bottom: 20px; right: 20px; } .opening-hours-title { font-size: 22px; } .opening-hours-icon { width: 24px; height: 24px; } /* Tablet Styles (768px - 991px) */ @media (min-width: 768px) and (max-width: 991px) { /* Brands Section */ .brands-logo-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; } .brands-center-badge { width: 160px; height: 160px; margin-top: -35px; } .brands-center-badge-inner { width: 160px; height: 160px; } .brands-center-circle-outer { width: 90px; height: 90px; } .brands-center-circle-inner { width: 72px; height: 72px; } .brands-scroll-svg { width: 110px; height: 110px; } /* Some Facts */ #some-facts h2 { font-size: 36px; } #some-facts .facts-value { font-size: 32px; } #some-facts .decorative-shape { width: 280px; height: 280px; } /* What We Do - Tablet */ #what-we-do { padding-top: 2.5rem; padding-bottom: 2.5rem; } #what-we-do .container { padding-left: 1.5rem; padding-right: 1.5rem; } .what-we-do-title { font-size: 36px !important; line-height: 1.3em !important; margin-bottom: 1.5rem !important; } .what-we-do-badge-text { font-size: 0.8rem; } .what-service-card { padding: 18px !important; margin-bottom: 1rem !important; } .what-service-icon { width: 44px !important; height: 44px !important; font-size: 18px !important; } .what-service-title { font-size: 20px !important; } .what-service-text { font-size: 0.85rem; } .service-support-badge { padding: 24px !important; } .service-support-value { font-size: 1.75rem !important; } .service-support-label { font-size: 0.8rem; } /* Other Sections */ #our-work h2, #latest-blog h2 { font-size: 36px; } /* Team Member - Tablet */ #team-member { padding-top: 2.5rem; padding-bottom: 2.5rem; } #team-member .container { padding-left: 1.5rem; padding-right: 1.5rem; } .team-member-title { font-size: 36px !important; line-height: 1.3em !important; } #team-member .row.g-4 { gap: 1rem !important; } .team-member-image-wrapper { height: 320px !important; } .team-name { font-size: 18px !important; } .team-role { font-size: 13px !important; } .team-member-content { padding: 1rem !important; } .team-social-icon { width: 40px !important; height: 40px !important; } .team-social-icon span { font-size: 16px !important; } /* About Section - Tablet */ #about { padding-top: 2.5rem; padding-bottom: 2.5rem; } .about-section-heading { font-size: 36px; line-height: 1.3em; } .about-feature-title { font-size: 20px; } .about-image-wrapper { margin-top: 1.5rem; } .about-overlay-image { top: -15px; left: -15px; max-width: 180px; } #about .opening-hours-badge { max-width: 240px; padding: 0.875rem; bottom: 15px; right: 15px; } .opening-hours-title { font-size: 20px; } } /* Mobile Styles (max-width: 767px) */ @media (max-width: 767px) { /* Brands Section */ #brands { padding: 1.5rem 0; } .brands-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .brands-center-badge { width: 120px; height: 120px; margin-top: -20px; order: 3; grid-column: 1 / -1; justify-self: center; } .brands-center-badge-inner { width: 120px; height: 120px; } .brands-center-circle-outer { width: 70px; height: 70px; } .brands-center-circle-inner { width: 56px; height: 56px; } .brands-scroll-svg { width: 90px; height: 90px; } .brands-scroll-svg text { font-size: 7px !important; } /* Some Facts */ #some-facts { background-attachment: scroll !important; } #some-facts h2 { font-size: 28px; line-height: 1.3em; } #some-facts .facts-value { font-size: 28px; } #some-facts .decorative-shape { width: 200px; height: 200px; display: none; /* Hide on mobile for better UX */ } /* What We Do - Mobile */ #what-we-do { padding-top: 2rem; padding-bottom: 2rem; } #what-we-do .container { padding-left: 1rem; padding-right: 1rem; } .what-we-do-title { font-size: 28px !important; line-height: 1.3em !important; margin-bottom: 1.25rem !important; } .what-we-do-badge-icon { font-size: 0.9rem; } .what-we-do-badge-text { font-size: 0.75rem; } .what-service-card { padding: 16px !important; margin-bottom: 1rem !important; } .what-service-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; } .what-service-title { font-size: 18px !important; } .what-service-text { font-size: 0.8rem; line-height: 1.5; } .service-support-wrapper { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; margin-top: 1.5rem; width: 100%; } .service-support-badge { padding: 20px !important; width: 100%; max-width: 100%; position: relative !important; } .service-support-value { font-size: 1.5rem !important; } .service-support-label { font-size: 0.75rem; } /* Our Work */ #our-work h2 { font-size: 28px; line-height: 1.3em; } /* Team Member - Mobile */ #team-member { padding-top: 2rem; padding-bottom: 2rem; } #team-member .container { padding-left: 1rem; padding-right: 1rem; } .team-member-title { font-size: 28px !important; line-height: 1.3em !important; } .team-member-image-wrapper { height: 300px !important; } .team-name { font-size: 18px !important; } .team-role { font-size: 13px !important; } .team-social-icon { width: 40px !important; height: 40px !important; } .team-social-icon span { font-size: 16px !important; } /* Latest Blog */ #latest-blog h2 { font-size: 28px; line-height: 1.3em; } /* About Section - Mobile */ #about { padding-top: 2rem; padding-bottom: 2rem; } #about .container { padding-left: 1rem; padding-right: 1rem; } .about-section-heading { font-size: 28px; line-height: 1.3em; margin-bottom: 1rem !important; } .about-section-text { font-size: 0.95rem; margin-bottom: 1.5rem !important; } .about-feature-item { margin-bottom: 1.25rem; } .about-feature-title { font-size: 18px; margin-bottom: 0.5rem !important; } .about-feature-text { font-size: 0.875rem; line-height: 1.5; } .about-image-wrapper { margin-top: 2rem; padding: 0; } .about-overlay-image { position: relative !important; top: 0 !important; left: 0 !important; max-width: 100% !important; margin-bottom: 1rem; display: block; } #about .opening-hours-badge { max-width: 100% !important; padding: 1rem !important; position: relative !important; bottom: auto !important; right: auto !important; margin-top: 1.5rem; width: 100%; } .opening-hours-title { font-size: 18px !important; } .opening-hours-icon { width: 20px !important; height: 20px !important; } /* Hero Section Additional Fixes */ #hero h1 { font-size: clamp(22px, 6vw, 55px) !important; } } /* ========== HERO SECTION COMPREHENSIVE RESPONSIVE STYLES ========== */ #hero { padding-top: 5rem; padding-bottom: 5rem; position: relative; overflow: hidden; } .hero-container { max-width: 1280px; margin-left: auto; margin-right: auto; position: relative; z-index: 10; } .hero-content { padding: 1rem 0; } .hero-badge { margin-bottom: 1.5rem; } .hero-badge-icon { font-size: 1rem; } .hero-badge-text { font-size: 0.875rem; letter-spacing: 1px; } .hero-title { font-size: 55px; font-weight: 600; line-height: 1.2em; color: #ffffff; } .hero-buttons { margin-top: 2rem; margin-bottom: 2rem; } .hero-button { font-size: 1rem; text-decoration: none; transition: all 0.3s ease; } .hero-button-primary { background-color: #3b82f6; color: #ffffff; } .hero-button-primary:hover { background-color: #2563eb; color: #ffffff; } .hero-button-secondary { border: 2px solid #ffffff; color: #ffffff; } .hero-button-secondary:hover { background-color: #ffffff; color: #000000; } .hero-features { margin-top: 2rem; margin-bottom: 2rem; } .hero-feature-item { margin-bottom: 1rem; } .hero-feature-text { font-size: 1rem; color: #ffffff; } .hero-image-wrapper { padding-left: 2rem; } /* SweetAlert Custom Styling */ .swal2-popup { border-radius: 10px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important; } .swal2-title { color: #2c3e50 !important; font-size: 24px !important; } .swal2-confirm { background-color: #3085d6 !important; border-radius: 5px !important; padding: 10px 30px !important; font-size: 16px !important; } /* Success Section Styling */ #successSection { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .alert-success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; border-radius: 8px; padding: 20px; } .btn-primary { background-color: #3085d6; border-color: #3085d6; padding: 12px 30px; font-size: 18px; border-radius: 8px; transition: all 0.3s ease; } .btn-primary:hover { background-color: #2573c3; border-color: #2573c3; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } /* ------------------------- */ /* ============================================ GLOBAL 1220px MAX WIDTH FOR SINGLE POSTS ============================================ */ @media (max-width: 768px) { .single-post .container, .single .container, .single-post .container-lg, .single .container-lg { padding-left: 15px !important; padding-right: 15px !important; } .single-post .classical-editor-content img, .single .classical-editor-content img { max-width: 100% !important; height: auto !important; } } /* ------------------------- */ /* Tablet Styles (768px - 991px) */ @media (min-width: 768px) and (max-width: 991px) { #hero { padding-top: 3.5rem; padding-bottom: 3.5rem; } .hero-container { padding-left: 1.5rem; padding-right: 1.5rem; } .hero-content { padding: 0.5rem 0; } .hero-badge { margin-bottom: 1.25rem; } .hero-badge-text { font-size: 0.8rem; } .hero-title { font-size: 38px; line-height: 1.3em; margin-bottom: 1.5rem !important; } .hero-buttons { margin-top: 1.5rem; margin-bottom: 1.5rem; } .hero-button { font-size: 0.95rem; padding: 0.6rem 1.75rem !important; } .hero-features { margin-top: 1.5rem; margin-bottom: 1.5rem; } .hero-feature-text { font-size: 0.95rem; } .hero-image-wrapper { padding-left: 1.5rem; margin-top: 2rem; } } /* Mobile Styles (max-width: 767px) */ @media (max-width: 767px) { #hero { padding-top: 2.5rem; padding-bottom: 2.5rem; } .hero-container { padding-left: 1rem; padding-right: 1rem; } .hero-content { padding: 0; text-align: center; } .hero-badge { margin-bottom: 1rem; justify-content: center; } .hero-badge-icon { font-size: 0.9rem; } .hero-badge-text { font-size: 0.75rem; } .hero-title { font-size: 28px; line-height: 1.3em; margin-bottom: 1.25rem !important; text-align: center; } .hero-buttons { margin-top: 1.25rem; margin-bottom: 1.25rem; justify-content: center; flex-direction: column; align-items: center; } .hero-button { font-size: 0.9rem; padding: 0.5rem 1.5rem !important; width: 100%; max-width: 280px; text-align: center; justify-content: center; } .hero-features { margin-top: 1.25rem; margin-bottom: 1.25rem; text-align: left; } .hero-feature-item { margin-bottom: 0.75rem; } .hero-feature-text { font-size: 0.9rem; } .hero-image-wrapper { padding-left: 0; margin-top: 2rem; } } /* Small Mobile Styles (max-width: 575px) */ @media (max-width: 575px) { #hero { padding-top: 2rem; padding-bottom: 2rem; } .hero-title { font-size: 24px; } .hero-badge-text { font-size: 0.7rem; } .hero-button { font-size: 0.85rem; padding: 0.45rem 1.25rem !important; max-width: 100%; } .hero-feature-text { font-size: 0.85rem; } } /* Small Mobile Styles (max-width: 575px) */ @media (max-width: 575px) { /* Brands Section */ .brands-center-badge { width: 100px; height: 100px; margin-top: -15px; } .brands-center-badge-inner { width: 100px; height: 100px; } .brands-center-circle-outer { width: 60px; height: 60px; } .brands-center-circle-inner { width: 48px; height: 48px; } .brands-scroll-svg { width: 75px; height: 75px; } .brands-scroll-svg text { font-size: 6px !important; } /* Some Facts */ #some-facts h2 { font-size: 24px; } #some-facts .facts-value { font-size: 24px; } /* What We Do - Small Mobile */ #what-we-do { padding-top: 1.5rem; padding-bottom: 1.5rem; } .what-we-do-title { font-size: 24px !important; } .what-service-card { padding: 14px !important; } .what-service-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; } .what-service-title { font-size: 16px !important; } .what-service-text { font-size: 0.75rem; } .service-support-badge { padding: 18px !important; } .service-support-value { font-size: 1.25rem !important; } /* Other Sections */ #our-work h2, #team-member h2, #latest-blog h2 { font-size: 24px; } /* About Section - Small Mobile */ #about { padding-top: 1.5rem; padding-bottom: 1.5rem; } .about-section-heading { font-size: 24px; } .about-feature-title { font-size: 16px; } .about-feature-text { font-size: 0.8rem; } .opening-hours-title { font-size: 16px !important; } #about .opening-hours-badge { padding: 0.875rem !important; } #about .opening-hours-badge h5 { font-size: 16px !important; } } /* Fix for background-attachment on mobile */ @media (max-width: 767px) { section[style*="background-attachment: fixed"] { background-attachment: scroll !important; } } /* Fix for overflow issues */ @media (max-width: 767px) { .container, .max-w-7xl { padding-left: 1rem; padding-right: 1rem; } section { overflow-x: hidden; } } /* Fix for text overflow */ @media (max-width: 767px) { h1, h2, h3, h4, h5, h6 { word-wrap: break-word; overflow-wrap: break-word; } p, span, div { word-wrap: break-word; overflow-wrap: break-word; } } /* Site Preloader styles */ #site-preloader { position: fixed; inset: 0; background: #ffffff; z-index: 99999; display: flex; align-items: center; justify-content: center; transition: opacity .45s ease, visibility .45s ease; } #site-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .site-preloader-inner { text-align: center; } .site-preloader-logo { max-width: 180px; width: 40%; height: auto; animation: preloader-pulse 1.4s ease-in-out infinite; } .site-preloader-logo-text { font-family: 'Jost', sans-serif; font-size: 28px; font-weight:700; color:#111; } @keyframes preloader-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.95); opacity: 0.85; } 100% { transform: scale(1); opacity: 1; } } /* Logo: Explicitly disable image-anime animation */ .logo-wrap, .logo-wrap img, header .logo-wrap, header figure, header figure.image-anime, header figure.image-anime img, header img { animation: none !important; transform: none !important; } /* Remove all pseudo-element animations from header images */ header figure.image-anime::before, header figure.image-anime::after, header figure::before, header figure::after, footer figure.image-anime::before, footer figure.image-anime::after, footer figure::before, footer figure::after { animation: none !important; transform: none !important; display: none !important; } /* Ensure preloader logo still animates */ #site-preloader .site-preloader-logo { animation: preloader-pulse 1.4s ease-in-out infinite !important; } /* Enhanced Multi-Step Form Styles */ .service-request-form { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 2rem 0; } .form-container { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); overflow: hidden; } .form-header { background: linear-gradient(135deg, #3085d6, #2573c3); color: white; padding: 2rem; text-align: center; } .form-header h2 { margin: 0; font-size: 2rem; font-weight: 700; } .form-body { padding: 2rem; } /* Enhanced Input Animations */ .enhanced-input:focus, .enhanced-select:focus { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(48, 133, 214, 0.15); } .enhanced-input::placeholder { color: #adb5bd; transition: all 0.3s ease; } .enhanced-input:focus::placeholder { transform: translateY(-20px); opacity: 0; } /* Service Type Icons */ .service-option { display: flex; align-items: center; padding: 0.75rem; border: 2px solid #e9ecef; border-radius: 10px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.3s ease; } .service-option:hover { border-color: #3085d6; background-color: #f8f9fa; } .service-option.selected { border-color: #3085d6; background-color: rgba(48, 133, 214, 0.1); } .service-icon { font-size: 1.5rem; margin-right: 1rem; width: 40px; text-align: center; } /* Progress Animation */ .progress-fill { background: linear-gradient(90deg, #3085d6, #2573c3, #667eea); background-size: 200% 100%; animation: gradientShift 3s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Button Enhancements */ .btn-enhanced { position: relative; overflow: hidden; border: none; border-radius: 25px; padding: 12px 30px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; } .btn-enhanced::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; } .btn-enhanced:hover::before { left: 100%; } .btn-enhanced:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } /* Success Animation */ .success-checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 2; stroke: #28a745; stroke-miterlimit: 10; margin: 10% auto; box-shadow: inset 0px 0px 0px #28a745; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; } .success-checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #28a745; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .success-checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } } @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #28a745; } } /* Loading Spinner Enhancement */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .loading-spinner { width: 60px; height: 60px; border: 4px solid #f3f3f3; border-top: 4px solid #3085d6; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Form Validation Enhancements */ .field-error { animation: shake 0.5s ease-in-out; border-color: #dc3545 !important; } .field-success { animation: pulse 0.5s ease-in-out; border-color: #28a745 !important; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Mobile Optimizations */ @media (max-width: 768px) { .form-container { margin: 1rem; border-radius: 15px; } .form-header { padding: 1.5rem; } .form-header h2 { font-size: 1.5rem; } .form-body { padding: 1.5rem; } .step-icon { width: 60px; height: 60px; font-size: 24px; } .enhanced-input, .enhanced-select { font-size: 16px; /* Prevents zoom on iOS */ } } /* Dark Mode Support */ @media (prefers-color-scheme: dark) { .form-container { background: rgba(33, 37, 41, 0.95); color: #fff; } .step-header { background: linear-gradient(135deg, #2c3e50, #34495e); } .enhanced-input, .enhanced-select { background-color: #495057; border-color: #6c757d; color: #fff; } .enhanced-input::placeholder { color: #adb5bd; } .review-card { background: #495057; border-color: #6c757d; } } /* Accessibility Enhancements */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .focus-visible { outline: 2px solid #3085d6; outline-offset: 2px; } /* High Contrast Mode */ @media (prefers-contrast: high) { .enhanced-input, .enhanced-select { border-width: 3px; } .btn-primary { border: 2px solid #000; } .step-circle { border-width: 3px; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================= GREY GOOSE TEMPLATE - IELTS ENGLISH ACADEMY LANDING PAGE ============================================================= */ body.greygoose-page { font-family: 'Jost', 'Poppins', Arial, sans-serif; background: #ffffff; color: #333333; line-height: 1.6; margin: 0; padding: 0; } .greygoose-page * { box-sizing: border-box; } .greygoose-page img { max-width: 100%; height: auto; display: block; } .greygoose-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; } /* ========== 1. HERO SECTION - IELTS SCORE ========== */ .gg-hero { position: relative; padding: 60px 0 80px; background: linear-gradient(135deg, #fff5f0 0%, #ffffff 50%, #f0f9ff 100%); overflow: hidden; } .gg-hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(220,38,38,0.08) 0%, transparent 70%); border-radius: 50%; } .gg-hero::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%); border-radius: 50%; } .gg-hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .gg-hero-content h1 { font-size: 64px; font-weight: 800; line-height: 1.1; margin: 0 0 16px; color: #dc2626; text-transform: uppercase; letter-spacing: -1px; } .gg-hero-content h1 span { color: #1e3a8a; } .gg-hero-subtitle { font-size: 18px; font-weight: 600; color: #1e293b; margin-bottom: 12px; } .gg-hero-teacher { font-size: 15px; color: #475569; margin-bottom: 20px; line-height: 1.7; } .gg-hero-teacher strong { color: #1e3a8a; font-weight: 700; } .gg-hero-description { font-size: 14px; color: #64748b; margin-bottom: 28px; line-height: 1.8; } .gg-btn { display: inline-block; padding: 14px 36px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; text-transform: uppercase; letter-spacing: 0.5px; } .gg-btn-primary { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #ffffff; box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35); } .gg-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(220, 38, 38, 0.45); color: #ffffff; } .gg-hero-image-wrap { position: relative; text-align: right; } .gg-hero-image-wrap img { border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.15); max-height: 480px; object-fit: cover; margin-left: auto; } .gg-floating-badge { position: absolute; background: #ffffff; padding: 14px 20px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; } .gg-badge-top { top: 40px; left: 0; color: #1e3a8a; } .gg-badge-bottom { bottom: 20px; right: 20px; color: #dc2626; } /* ========== 2. WHY IELTS WITH GREY GOOSE ========== */ .gg-why { padding: 70px 0; background: #ffffff; position: relative; } .gg-why-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .gg-why-image img { border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.12); } .gg-why-content h2 { font-size: 40px; font-weight: 800; color: #1e293b; margin: 0 0 8px; line-height: 1.2; } .gg-why-content h2 span { background: linear-gradient(135deg, #dc2626, #991b1b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gg-why-highlight { display: inline-block; background: #dc2626; color: #ffffff; padding: 8px 20px; border-radius: 6px; font-size: 18px; font-weight: 700; margin: 0 0 30px; } .gg-why-list { list-style: none; padding: 0; margin: 0; } .gg-why-list li { padding: 10px 0 10px 32px; position: relative; font-size: 14px; color: #475569; line-height: 1.6; border-bottom: 1px dashed #e2e8f0; } .gg-why-list li:last-child { border-bottom: none; } .gg-why-list li::before { content: '✓'; position: absolute; left: 0; top: 10px; width: 22px; height: 22px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .gg-question-mark { position: absolute; top: 20px; left: 45%; font-size: 100px; font-weight: 900; color: #dc2626; z-index: 3; line-height: 1; transform: rotate(-10deg); text-shadow: 4px 4px 0 #fbbf24; } /* ========== 3. BENEFITS YOU'LL GET ========== */ .gg-benefits { padding: 60px 0 80px; background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); position: relative; overflow: hidden; } .gg-benefits::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(251,191,36,0.1) 0%, transparent 50%); } .gg-benefits-title { text-align: center; font-size: 36px; font-weight: 800; color: #ffffff; margin: 0 0 50px; text-transform: uppercase; letter-spacing: 1px; position: relative; } .gg-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; } .gg-benefit-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 18px; padding: 35px 25px; text-align: center; color: #ffffff; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .gg-benefit-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.6s ease; } .gg-benefit-card:hover::before { left: 100%; } .gg-benefit-card:hover { transform: translateY(-8px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); box-shadow: 0 20px 40px rgba(0,0,0,0.25); } .gg-benefit-icon { width: 64px; height: 64px; margin: 0 auto 18px; background: linear-gradient(135deg, #fbbf24, #f59e0b); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 20px rgba(251,191,36,0.4); } .gg-benefit-card h3 { font-size: 24px; font-weight: 800; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 1px; } .gg-benefit-card p { font-size: 13px; margin: 0; opacity: 0.9; line-height: 1.6; } /* ========== 4. WHY OUR TEACHERS MAKE A DIFFERENCE ========== */ .gg-teachers { padding: 70px 0; background: linear-gradient(135deg, #0c3b65 0%, #1e40af 50%, #1e3a8a 100%); position: relative; overflow: hidden; color: #ffffff; } .gg-teachers::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.06) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(59,130,246,0.2) 0%, transparent 40%); } .gg-teachers-header { text-align: center; margin-bottom: 50px; position: relative; } .gg-teachers-header h2 { font-size: 34px; font-weight: 800; margin: 0 0 10px; text-transform: uppercase; } .gg-teachers-header p { font-size: 17px; opacity: 0.85; margin: 0; font-style: italic; } .gg-teachers-showcase { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; } .gg-teacher-center-image { position: relative; z-index: 2; } .gg-teacher-center-image img { width: 320px; height: 400px; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.4); border: 4px solid rgba(255,255,255,0.15); } .gg-teacher-fact { position: absolute; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); border-radius: 16px; padding: 18px 22px; max-width: 280px; z-index: 3; } .gg-teacher-fact h4 { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: #fbbf24; text-transform: uppercase; letter-spacing: 0.5px; } .gg-teacher-fact p { font-size: 13px; margin: 0; opacity: 0.9; line-height: 1.5; } .gg-fact-tl { top: 10px; left: 5%; } .gg-fact-tr { top: 10px; right: 5%; } .gg-fact-bl { bottom: 10px; left: 5%; } .gg-fact-br { bottom: 10px; right: 5%; } .gg-dotted-line { position: absolute; z-index: 1; stroke: rgba(251,191,36,0.5); stroke-width: 2; stroke-dasharray: 6, 6; fill: none; } /* ========== 5. COURSES WE OFFER (PACKAGES) ========== */ .gg-courses { padding: 70px 0; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); } .gg-courses-title { text-align: center; font-size: 32px; font-weight: 800; color: #1e293b; margin: 0 0 50px; text-transform: uppercase; letter-spacing: 1px; } .gg-courses-title span { color: #dc2626; } .gg-courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .gg-course-card { background: #ffffff; border-radius: 20px; padding: 30px 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #e2e8f0; display: flex; flex-direction: column; position: relative; overflow: hidden; } .gg-course-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #dc2626, #fbbf24, #22c55e); } .gg-course-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.15); border-color: transparent; } .gg-course-tag { display: inline-block; background: #fef3c7; color: #92400e; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; align-self: flex-start; } .gg-course-card h3 { font-size: 24px; font-weight: 800; color: #1e293b; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; } .gg-course-meta { display: grid; gap: 8px; margin-bottom: 18px; } .gg-course-meta-item { font-size: 13px; color: #64748b; padding: 6px 0; border-bottom: 1px dashed #e2e8f0; display: flex; justify-content: space-between; gap: 10px; } .gg-course-meta-item:last-child { border-bottom: none; } .gg-course-meta-item strong { color: #1e293b; font-weight: 600; } .gg-course-highlights { background: #f1f5f9; border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; font-size: 12px; color: #475569; line-height: 1.7; } .gg-course-highlights ol, .gg-course-highlights ul { margin: 0; padding-left: 18px; } .gg-course-highlights li { margin-bottom: 4px; } .gg-course-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gg-course-price { font-size: 22px; font-weight: 800; color: #1e3a8a; } .gg-course-price del { font-size: 14px; font-weight: 500; color: #94a3b8; margin-right: 8px; } .gg-btn-buy { padding: 10px 24px; background: linear-gradient(135deg, #dc2626, #b91c1c); color: #ffffff; border-radius: 999px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(220,38,38,0.3); } .gg-btn-buy:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(220,38,38,0.4); color: #ffffff; } .gg-course-note { margin-top: 12px; font-size: 11px; color: #64748b; font-style: italic; text-align: center; width: 100%; } /* ========== 6. STUDENT REVIEW ========== */ .gg-reviews { padding: 70px 0; background: linear-gradient(135deg, #0c3b65 0%, #1e3a8a 100%); color: #ffffff; position: relative; overflow: hidden; } .gg-reviews::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(251,191,36,0.08) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(59,130,246,0.12) 0%, transparent 50%); } .gg-reviews-title { text-align: center; font-size: 34px; font-weight: 800; color: #ffffff; margin: 0 0 50px; text-transform: uppercase; letter-spacing: 1px; position: relative; } /* ── Reviews Swiper Slider ── */ .gg-reviews-swiper { width: 100%; padding: 4px 60px 60px 60px !important; /* side space for glass pill arrows + bottom for dots */ padding-bottom: 60px !important; overflow: visible; } @media (max-width: 991px) { .gg-reviews-swiper { padding: 4px 10px 60px 10px !important; } } .gg-reviews-swiper .swiper-wrapper { align-items: stretch; } .gg-reviews-swiper .swiper-slide { height: auto; flex-shrink: 0; } .gg-review-card { background: #ffffff; border-radius: 16px; padding: 20px; color: #333333; box-shadow: 0 15px 35px rgba(0,0,0,0.2); transition: all 0.4s cubic-bezier(.2,.8,.2,1); height: 100%; } .gg-review-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(0,0,0,0.3); } /* Pagination dots */ .gg-swiper-pagination { bottom: 0 !important; } .gg-swiper-pagination .swiper-pagination-bullet { background: rgba(255,255,255,0.35); opacity: 1; width: 10px; height: 10px; transition: background 0.3s ease, transform 0.3s ease; } .gg-swiper-pagination .swiper-pagination-bullet-active { background: #ffffff; transform: scale(1.35); box-shadow: 0 0 0 4px rgba(255,255,255,0.15); } /* Navigation arrows — glassmorphism pill cards (user profile preference) */ .gg-swiper-prev, .gg-swiper-next { top: calc(50% - 30px) !important; width: 44px !important; height: 44px !important; margin-top: 0 !important; color: #ffffff !important; border-radius: 999px !important; /* pill-shaped */ background: rgba(255,255,255,0.08) !important; backdrop-filter: saturate(160%) blur(18px) !important; -webkit-backdrop-filter: saturate(160%) blur(18px) !important; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 8px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22) !important; transition: all 0.3s cubic-bezier(.2,.8,.2,1) !important; cursor: pointer; } .gg-swiper-prev::after, .gg-swiper-next::after { font-size: 16px !important; font-weight: 800; line-height: 1; } .gg-swiper-prev:hover, .gg-swiper-next:hover { background: rgba(255,255,255,0.18) !important; transform: translateY(-1px) scale(1.04); color: #ffffff !important; } .gg-swiper-prev { left: 6px !important; } .gg-swiper-next { right: 6px !important; } @media (max-width: 991px) { .gg-swiper-prev, .gg-swiper-next { width: 36px !important; height: 36px !important; } .gg-swiper-prev::after, .gg-swiper-next::after { font-size: 14px !important; } .gg-swiper-prev { left: -2px !important; } .gg-swiper-next { right: -2px !important; } } @media (max-width: 640px) { .gg-swiper-prev, .gg-swiper-next { display: none !important; } } .gg-review-doc { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px 20px; position: relative; min-height: 260px; } .gg-review-doc::before { content: '"'; position: absolute; top: 0; left: 12px; font-size: 60px; color: #dc2626; opacity: 0.2; font-family: Georgia, serif; line-height: 1; } .gg-review-student { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .gg-review-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1e40af); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; } .gg-review-name { font-size: 14px; font-weight: 700; color: #1e293b; } .gg-review-score { font-size: 12px; color: #f59e0b; font-weight: 600; } .gg-review-score span { color: #64748b; font-weight: 400; margin-left: 4px; } .gg-review-text { font-size: 12.5px; color: #475569; line-height: 1.7; margin: 0; } .gg-review-stars { color: #f59e0b; font-size: 14px; margin-top: 10px; letter-spacing: 2px; } /* ========== 7. LIMITED SEATS CTA ========== */ .gg-cta { padding: 60px 0; background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%); position: relative; overflow: hidden; } .gg-cta::before { content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%); border-radius: 50%; } .gg-cta-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; position: relative; } .gg-cta-content h2 { font-size: 44px; font-weight: 900; color: #1e293b; margin: 0 0 10px; line-height: 1.1; text-transform: uppercase; } .gg-cta-content h2 span { display: block; color: #dc2626; font-size: 52px; } .gg-cta-features { list-style: none; padding: 0; margin: 24px 0; } .gg-cta-features li { padding: 6px 0 6px 28px; position: relative; font-size: 15px; color: #1e293b; font-weight: 600; } .gg-cta-features li::before { content: '►'; position: absolute; left: 0; color: #dc2626; font-size: 12px; top: 9px; } .gg-cta-register-box { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-radius: 18px; padding: 24px; display: inline-block; margin-top: 10px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); } .gg-cta-register-box h4 { font-size: 20px; font-weight: 800; color: #dc2626; margin: 0 0 6px; } .gg-cta-register-box p { font-size: 14px; color: #1e293b; margin: 0 0 16px; font-weight: 600; } .gg-cta-visual { position: relative; display: flex; align-items: center; justify-content: center; } .gg-limited-badge { position: relative; text-align: center; } .gg-timer-icon { width: 120px; height: 120px; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 50px rgba(0,0,0,0.2); margin: 0 auto 10px; font-size: 60px; } .gg-limited-tag { display: inline-block; background: #1e3a8a; color: #ffffff; padding: 10px 28px; border-radius: 999px 999px 999px 0; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transform: rotate(-6deg); margin-bottom: 10px; box-shadow: 0 10px 25px rgba(30,58,138,0.4); } .gg-seats-tag { display: inline-block; background: #dc2626; color: #ffffff; padding: 14px 42px 14px 28px; border-radius: 0 0 0 999px; font-size: 36px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; transform: rotate(-3deg); box-shadow: 0 15px 35px rgba(220,38,38,0.45); position: relative; } .gg-seats-tag::after { content: ''; position: absolute; bottom: -14px; right: 10%; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 18px solid #991b1b; } /* ========== 8. FAQS SECTION ========== */ .gg-faqs { padding: 70px 0; background: #ffffff; } .gg-faqs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .gg-faqs-content h2 { font-size: 36px; font-weight: 800; color: #dc2626; margin: 0 0 40px; text-transform: uppercase; letter-spacing: 1px; } .gg-faq-item { border-bottom: 1px solid #e2e8f0; padding: 18px 0; } .gg-faq-item:last-child { border-bottom: none; } .gg-faq-question { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: color 0.2s ease; } .gg-faq-question:hover { color: #dc2626; } .gg-faq-question::before { content: 'Q.'; color: #dc2626; font-weight: 800; font-size: 16px; flex-shrink: 0; } .gg-faq-answer { font-size: 13.5px; color: #64748b; line-height: 1.75; margin: 0; padding-left: 26px; } .gg-faq-visual { display: flex; align-items: center; justify-content: center; min-height: 400px; position: relative; } .gg-faq-3d-stack { position: relative; transform: rotate(-8deg); } .gg-faq-block { width: 90px; height: 90px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 50px; font-weight: 900; color: #ffffff; box-shadow: 0 15px 35px rgba(0,0,0,0.2); position: absolute; } .gg-faq-f { background: linear-gradient(135deg, #dc2626, #991b1b); top: 0; left: 0; z-index: 3; } .gg-faq-a { background: linear-gradient(135deg, #f59e0b, #d97706); top: 70px; left: 40px; z-index: 2; } .gg-faq-q { background: linear-gradient(135deg, #16a34a, #15803d); top: 140px; left: 80px; z-index: 1; } .gg-faq-character { position: absolute; top: 40px; right: 0; z-index: 5; } .gg-faq-character-body { width: 120px; height: 200px; background: #e5e7eb; border-radius: 60px 60px 30px 30px; position: relative; } .gg-faq-character-head { width: 70px; height: 70px; background: #fef3c7; border-radius: 50%; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); } /* ========== 9. FOOTER SECTION ========== */ .gg-footer-cta-bar { background: #f1f5f9; padding: 20px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; } .gg-footer-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .gg-footer-cta-links { display: flex; gap: 30px; flex-wrap: wrap; } .gg-footer-cta-links a { font-size: 14px; font-weight: 600; color: #1e3a8a; text-decoration: none; transition: color 0.2s ease; display: flex; align-items: center; gap: 8px; } .gg-footer-cta-links a:hover { color: #dc2626; } .gg-footer-main { padding: 50px 0 30px; background: #ffffff; } .gg-footer-row { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 40px; } .gg-footer-brand h3 { font-size: 30px; font-weight: 800; color: #1e293b; margin: 0 0 14px; font-family: 'Brush Script MT', cursive; font-style: italic; } .gg-footer-brand p { font-size: 13px; color: #64748b; line-height: 1.7; margin: 0 0 20px; } .gg-footer-social { display: flex; gap: 10px; } .gg-footer-social a { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 700; transition: all 0.3s ease; } .gg-social-fb { background: #1877f2; } .gg-social-yt { background: #ff0000; } .gg-social-tw { background: #1da1f2; } .gg-social-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .gg-social-wa { background: #25d366; } .gg-footer-social a:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); } .gg-footer-contact h4, .gg-footer-map-title { font-size: 16px; font-weight: 800; color: #1e3a8a; margin: 0 0 18px; text-transform: uppercase; letter-spacing: 0.5px; } /* ── STANDALONE MAP COLUMN (Find Us) ── */ .gg-footer-map-embed { border-radius: 10px; overflow: hidden; border: 2px solid #e2e8f0; } .gg-footer-map-embed iframe { display: block; width: 100%; height: 240px; border: 0; } .gg-footer-map-address { font-size: 12px; color: #64748b; margin: 12px 0 0; line-height: 1.6; } .gg-footer-contact-info { font-size: 13px; color: #475569; line-height: 1.8; } .gg-footer-contact-info strong { color: #dc2626; font-size: 20px; display: block; margin-bottom: 6px; } .gg-footer-bottom { padding: 20px 0; border-top: 1px solid #e2e8f0; margin-top: 30px; } .gg-footer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #64748b; } .gg-footer-bottom-row strong { color: #1e293b; } /* ========== RESPONSIVE - TABLET ========== */ @media (max-width: 991px) { .gg-hero-row, .gg-why-row, .gg-cta-row, .gg-faqs-row { grid-template-columns: 1fr; gap: 35px; } .gg-hero-content h1 { font-size: 48px; } .gg-why-content h2 { font-size: 30px; } .gg-benefits-title { font-size: 28px; } .gg-teachers-header h2 { font-size: 26px; } .gg-courses-title { font-size: 26px; } .gg-reviews-title { font-size: 26px; } .gg-cta-content h2 { font-size: 34px; } .gg-cta-content h2 span { font-size: 40px; } .gg-faqs-content h2 { font-size: 28px; } .gg-benefits-grid, .gg-courses-grid { grid-template-columns: repeat(2, 1fr); } .gg-teacher-fact { position: relative; max-width: 100%; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 12px 0; } .gg-teachers-showcase { flex-direction: column; gap: 20px; min-height: auto; } .gg-faq-visual { min-height: 300px; order: -1; } .gg-footer-row { grid-template-columns: 1fr 1fr; gap: 30px; } .gg-footer-brand { grid-column: 1 / -1; } .gg-footer-map-embed iframe { height: 180px; } } /* ========== RESPONSIVE - MOBILE ========== */ @media (max-width: 640px) { .gg-hero { padding: 40px 0 50px; } .gg-why, .gg-teachers, .gg-courses, .gg-reviews, .gg-faqs { padding: 45px 0; } .gg-benefits { padding: 40px 0 55px; } .gg-cta { padding: 45px 0; } .gg-hero-content h1 { font-size: 36px; } .gg-hero-subtitle { font-size: 16px; } .gg-why-content h2 { font-size: 24px; } .gg-why-highlight { font-size: 15px; padding: 6px 14px; } .gg-benefits-title { font-size: 22px; margin-bottom: 35px; } .gg-teachers-header h2 { font-size: 22px; } .gg-teachers-header p { font-size: 14px; } .gg-courses-title { font-size: 22px; margin-bottom: 35px; } .gg-reviews-title { font-size: 22px; margin-bottom: 35px; } .gg-cta-content h2 { font-size: 26px; } .gg-cta-content h2 span { font-size: 32px; } .gg-faqs-content h2 { font-size: 24px; margin-bottom: 25px; } .gg-benefits-grid, .gg-courses-grid { grid-template-columns: 1fr; gap: 18px; } .gg-benefit-card { padding: 28px 20px; } .gg-benefit-card h3 { font-size: 20px; } .gg-benefit-icon { width: 54px; height: 54px; font-size: 24px; } .gg-teacher-center-image img { width: 100%; max-width: 280px; height: 350px; } .gg-course-card { padding: 24px 18px; } .gg-course-card h3 { font-size: 20px; } .gg-course-footer { flex-direction: column; align-items: stretch; } .gg-btn-buy { text-align: center; } .gg-review-card { padding: 16px; } .gg-review-doc { min-height: auto; padding: 18px 14px; } .gg-limited-tag { font-size: 18px; padding: 8px 22px; } .gg-seats-tag { font-size: 26px; padding: 12px 32px 12px 22px; } .gg-timer-icon { width: 90px; height: 90px; font-size: 44px; } .gg-cta-register-box { width: 100%; } .gg-footer-row { grid-template-columns: 1fr; gap: 25px; } .gg-footer-map-embed iframe { height: 160px; } .gg-footer-cta-row { flex-direction: column; align-items: stretch; } .gg-footer-cta-links { flex-direction: column; gap: 12px; } .gg-footer-bottom-row { flex-direction: column; text-align: center; } .gg-btn { padding: 12px 28px; font-size: 14px; } .gg-question-mark { font-size: 60px; } } /* ============================================================= HEADER: Sticky / Logo / Primary Menu / CTA / Mobile Toggle ============================================================= */ .gg-site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .gg-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; padding: 10px 0; } .gg-header-logo .gg-logo-link { display: inline-flex; align-items: center; text-decoration: none; gap: 8px; } .gg-header-logo .gg-logo-img { max-height: 52px; width: auto; object-fit: contain; } .gg-logo-text { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; line-height: 1; text-transform: capitalize; } .gg-logo-text-grey { color: #1e3a8a; } .gg-logo-text-goose { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gg-header-nav { flex: 1; display: flex; justify-content: center; } ul.gg-primary-menu, .gg-menu-fallback { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } ul.gg-primary-menu > li, .gg-menu-fallback > li { position: relative; } ul.gg-primary-menu > li > a, .gg-menu-fallback > li > a { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: #1e293b; text-decoration: none; transition: all 0.22s cubic-bezier(.4,0,.2,1); white-space: nowrap; } ul.gg-primary-menu > li > a:hover, .gg-menu-fallback > li > a:hover, ul.gg-primary-menu > li.current_page_item > a, ul.gg-primary-menu > li.current-menu-item > a, .gg-menu-fallback > li.current_page_item > a { background: linear-gradient(135deg, rgba(30, 58, 138, 0.08) 0%, rgba(220, 38, 38, 0.06) 100%); color: #1e3a8a; box-shadow: inset 0 0 0 1px rgba(30, 58, 138, 0.1); } ul.gg-primary-menu > li.menu-item-has-children > a::after { content: "▾"; margin-left: 6px; color: #94a3b8; font-size: 11px; line-height: 1; transition: transform 0.2s ease; } ul.gg-primary-menu > li.menu-item-has-children:hover > a::after { transform: rotate(180deg); color: #1e3a8a; } /* Dropdowns */ ul.gg-primary-menu ul.gg-submenu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; list-style: none; margin: 0; padding: 8px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10), 0 24px 50px rgba(15, 23, 42, 0.10); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 120; } ul.gg-primary-menu > li:hover > ul.gg-submenu, ul.gg-primary-menu > li:focus-within > ul.gg-submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } ul.gg-primary-menu ul.gg-submenu ul.gg-submenu { left: calc(100% + 12px); top: -8px; } ul.gg-primary-menu ul.gg-submenu li a { display: block; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: #334155; text-decoration: none; transition: all 0.18s ease; } ul.gg-primary-menu ul.gg-submenu li a:hover { background: linear-gradient(135deg, #eff6ff, #fef2f2); color: #1e3a8a; padding-left: 18px; } .gg-header-cta { flex-shrink: 0; } .gg-btn-sm { padding: 10px 22px !important; font-size: 13.5px !important; border-radius: 999px !important; } .gg-mobile-toggle { display: none; width: 44px; height: 44px; border: 1px solid rgba(30, 41, 59, 0.1); background: #ffffff; border-radius: 14px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0; flex-shrink: 0; transition: all 0.2s ease; } .gg-mobile-toggle:hover { border-color: rgba(30, 58, 138, 0.3); background: #f8fafc; } .gg-mobile-toggle span { display: block; width: 20px; height: 2px; background: #1e293b; border-radius: 2px; transition: transform .2s ease, opacity .15s ease; } .gg-mobile-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .gg-mobile-toggle.is-open span:nth-child(2) { opacity: 0; } .gg-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* HEADER RESPONSIVE */ @media (max-width: 991px) { .gg-header-nav { position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; padding: 18px; border-top: 1px solid rgba(15, 23, 42, 0.08); border-bottom: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); max-height: 0; visibility: hidden; opacity: 0; overflow: hidden; transition: all .3s ease; justify-content: stretch; } .gg-header-nav.is-open { max-height: 90vh; overflow-y: auto; visibility: visible; opacity: 1; padding: 18px; } ul.gg-primary-menu, .gg-menu-fallback { flex-direction: column; align-items: stretch; gap: 4px; } ul.gg-primary-menu > li > a, .gg-menu-fallback > li > a { padding: 12px 16px; border-radius: 12px; width: 100%; } ul.gg-primary-menu ul.gg-submenu { position: static; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none; border: 1px dashed rgba(15, 23, 42, 0.08); margin-top: 6px; } .gg-header-cta { display: none; } .gg-mobile-toggle { display: inline-flex; } } @media (max-width: 640px) { .gg-site-header { position: relative; } .gg-header-inner { min-height: 70px; gap: 10px; } .gg-logo-text { font-size: 22px; } .gg-header-logo .gg-logo-img { max-height: 42px; } } /* Fix template padding after sticky header */ .greygoose-page .gg-hero { padding-top: 40px; } @media (min-width: 992px) { .greygoose-page .gg-hero { padding-top: 70px; } } /* ============================================================ WooCommerce Integration — shop, product, cart, checkout, account Uses the same palette/type as the rest of the theme so these pages don't look like raw, unstyled WordPress output. ============================================================ */ .gg-woocommerce { color: #334155; font-size: 15px; line-height: 1.7; } .gg-woocommerce a { color: #1e3a8a; } .gg-woocommerce .woocommerce-breadcrumb { font-size: 13px; color: #94a3b8; margin: 0 0 24px; } .gg-woocommerce .woocommerce-breadcrumb a { color: #64748b; text-decoration: none; } .gg-woocommerce .woocommerce-breadcrumb a:hover { color: #1e3a8a; } /* Notices */ .gg-woocommerce .woocommerce-message, .gg-woocommerce .woocommerce-error, .gg-woocommerce .woocommerce-info { list-style: none; padding: 16px 20px; margin: 0 0 24px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; color: #1e293b; } .gg-woocommerce .woocommerce-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .gg-woocommerce .woocommerce-message a.button, .gg-woocommerce .woocommerce-error a.button { margin-left: 10px; } /* Buttons & quantity (shared by cart, checkout, account) */ .gg-woocommerce .quantity { display: inline-block; } .gg-woocommerce .quantity .qty { width: 70px; padding: 12px 14px; border-radius: 999px; border: 1px solid #e2e8f0; font-size: 15px; color: #1e293b; } .gg-woocommerce form.cart .button, .gg-woocommerce a.button, .gg-woocommerce button.button, .gg-woocommerce .single_add_to_cart_button { display: inline-block; padding: 14px 32px; border-radius: 999px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; border: none; cursor: pointer; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #ffffff !important; box-shadow: 0 8px 24px rgba(220, 38, 38, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .gg-woocommerce form.cart .button:hover, .gg-woocommerce a.button:hover, .gg-woocommerce button.button:hover, .gg-woocommerce .single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(220, 38, 38, 0.35); } /* Cart & checkout tables */ .gg-woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin: 0 0 24px; } .gg-woocommerce table.shop_table th, .gg-woocommerce table.shop_table td { padding: 14px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; font-size: 14px; } .gg-woocommerce table.shop_table th { color: #1e293b; font-weight: 700; } .gg-woocommerce table.shop_table td.product-thumbnail img { width: 64px; border-radius: 8px; } .gg-woocommerce .cart-collaterals .cart_totals { max-width: 420px; margin-left: auto; } /* Forms — checkout, my account, login/register */ .gg-woocommerce form .form-row { margin-bottom: 16px; } .gg-woocommerce form label { display: block; font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 6px; } .gg-woocommerce form .input-text, .gg-woocommerce form select, .gg-woocommerce form textarea { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid #e2e8f0; font-family: inherit; font-size: 14px; color: #1e293b; } /* My Account */ .gg-woocommerce .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; } .gg-woocommerce .woocommerce-MyAccount-navigation li a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; color: #1e293b; text-decoration: none; font-size: 13px; font-weight: 600; } .gg-woocommerce .woocommerce-MyAccount-navigation li.is-active a { background: #1e293b; color: #fff; border-color: #1e293b; } /* Visually hidden, still announced by screen readers (WordPress core class). */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* Star rating — shared by product page, reviews, and product cards. The empty stars are in-flow so the box is exactly five stars wide and WooCommerce's width:% on the inner span maps to the real fill. */ .gg-woocommerce .star-rating { position: relative; display: inline-block; float: none; width: auto; height: 1em; overflow: hidden; font-family: "Segoe UI Symbol", "Apple Symbols", Arial, sans-serif; font-size: 16px; line-height: 1; white-space: nowrap; vertical-align: middle; } .gg-woocommerce .star-rating::before { content: "\2605\2605\2605\2605\2605"; position: static; float: none; color: #e2e8f0; } .gg-woocommerce .star-rating span { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; padding-top: 1.5em; } .gg-woocommerce .star-rating span::before { content: "\2605\2605\2605\2605\2605"; position: absolute; top: 0; left: 0; color: #f59e0b; } /* Product cards — related/upsells on the product page and the shop archive. Same language as the landing page course cards (white card, gradient top strip, navy price, red pill button). WooCommerce's float grid sets widths with higher specificity, hence the few !important resets. */ .gg-woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .gg-woocommerce ul.products::before, .gg-woocommerce ul.products::after { content: none; display: none; } .gg-woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; width: auto !important; float: none !important; margin: 0 !important; padding: 14px 14px 20px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; text-align: left; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .gg-woocommerce ul.products li.product::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, #dc2626, #fbbf24, #22c55e); } .gg-woocommerce ul.products li.product:hover { transform: translateY(-8px); border-color: transparent; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14); } .gg-woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; } .gg-woocommerce ul.products li.product a img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 0 16px; border-radius: 14px; box-shadow: none; } .gg-woocommerce ul.products li.product .onsale { position: absolute; top: 26px; left: 26px; right: auto; z-index: 3; min-width: 0; min-height: 0; margin: 0; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, #dc2626, #b91c1c); color: #ffffff; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0.4px; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35); } .gg-woocommerce ul.products li.product h2, .gg-woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0 4px 6px; padding: 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: #1e293b; transition: color 0.2s ease; } .gg-woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: #1e3a8a; } .gg-woocommerce ul.products li.product .star-rating { margin: 0 4px 8px; font-size: 13px; } .gg-woocommerce ul.products li.product .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 4px 16px; font-size: 18px; font-weight: 800; color: #1e3a8a; } .gg-woocommerce ul.products li.product .price ins { order: 1; text-decoration: none; font-weight: 800; } .gg-woocommerce ul.products li.product .price del { order: 2; font-size: 13px; font-weight: 500; color: #94a3b8; opacity: 1; } .gg-woocommerce ul.products li.product .button { display: flex; justify-content: center; margin: auto 4px 0; padding: 12px 18px; font-size: 12.5px; box-shadow: none; } .gg-woocommerce ul.products li.product .button.loading { opacity: 0.6; pointer-events: none; } .gg-woocommerce ul.products li.product .added_to_cart { display: block; margin: 10px 4px 0; text-align: center; font-size: 13px; font-weight: 700; color: #1e3a8a; text-decoration: none; } /* ============================================================ WooCommerce — Single Product Page Shell: woocommerce.php. Markup hooks: functions.php §10. Behaviour: assets/js/single-product.js. WooCommerce's own stylesheets are not loaded on this page, so everything it renders here is styled below. ============================================================ */ .gg-product-page { --gg-red: #dc2626; --gg-red-dark: #b91c1c; --gg-navy: #1e3a8a; --gg-ink: #1e293b; --gg-text: #475569; --gg-muted: #64748b; --gg-faint: #94a3b8; --gg-line: #e2e8f0; --gg-soft: #f8fafc; --gg-radius: 24px; --gg-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.07); --gg-band: #f4f7fb; --gg-sticky-top: 108px; position: relative; padding: 28px 0 0; overflow-x: clip; color: var(--gg-text); font-size: 15px; line-height: 1.7; background: radial-gradient(620px 420px at 100% 0, rgba(220, 38, 38, 0.07), transparent 70%), radial-gradient(520px 380px at 0 360px, rgba(37, 99, 235, 0.06), transparent 70%), linear-gradient(180deg, #fff7f3 0, #ffffff 640px); } .admin-bar .gg-product-page { --gg-sticky-top: 140px; } .gg-product-page #reviews, .gg-product-page #review_form_wrapper, .gg-product-page .woocommerce-tabs { scroll-margin-top: var(--gg-sticky-top); } /* ── Breadcrumb ── */ .gg-product-page .gg-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 24px; font-size: 13px; font-weight: 500; color: var(--gg-ink); } .gg-product-page .gg-breadcrumb a { color: var(--gg-muted); text-decoration: none; transition: color 0.2s ease; } .gg-product-page .gg-breadcrumb a:hover { color: var(--gg-red); } .gg-product-page .gg-breadcrumb-sep { color: #cbd5e1; } /* ── Notices (added to cart, errors) ── */ .gg-product-page .woocommerce-notices-wrapper:empty { display: none; } .gg-product-page .woocommerce-message, .gg-product-page .woocommerce-info, .gg-product-page .woocommerce-error { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; padding: 14px 18px 14px 54px; list-style: none; border-radius: 16px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #14532d; font-weight: 500; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); } /* WooCommerce focuses the notice so screen readers announce it; swap the browser's heavy default ring for a soft one in the notice's own colour. */ .gg-product-page .woocommerce-message:focus, .gg-product-page .woocommerce-info:focus, .gg-product-page .woocommerce-error:focus { outline: 3px solid rgba(34, 197, 94, 0.25); outline-offset: 2px; } .gg-product-page .woocommerce-info:focus { outline-color: rgba(59, 130, 246, 0.25); } .gg-product-page .woocommerce-error:focus { outline-color: rgba(220, 38, 38, 0.25); } .gg-product-page .woocommerce-message::before, .gg-product-page .woocommerce-info::before, .gg-product-page .woocommerce-error::before { position: absolute; left: 16px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 14px; font-weight: 800; line-height: 1; } .gg-product-page .woocommerce-message::before { content: ""; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; } .gg-product-page .woocommerce-info { border-color: #bfdbfe; background: #eff6ff; color: var(--gg-navy); } .gg-product-page .woocommerce-info::before { content: "i"; background: #3b82f6; font-family: Georgia, serif; font-style: italic; } .gg-product-page .woocommerce-error { display: block; border-color: #fecaca; background: #fef2f2; color: #991b1b; } .gg-product-page .woocommerce-error::before { content: "!"; background: var(--gg-red); top: 26px; } .gg-product-page .woocommerce-error li { margin: 0; } .gg-product-page .woocommerce-message .button, .gg-product-page .woocommerce-info .button { order: 2; margin-left: auto; padding: 10px 22px; font-size: 12px; box-shadow: none; } /* ── Hero: gallery + summary card ── */ .gg-product-page div.product { position: relative; padding-bottom: 88px; } .gg-product-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: start; } .gg-product-media { position: sticky; top: var(--gg-sticky-top); min-width: 0; } /* Gallery */ .gg-product-page .woocommerce-product-gallery { position: relative; margin: 0; } .gg-product-page .woocommerce-product-gallery__wrapper { margin: 0; } .gg-product-page .woocommerce-product-gallery .flex-viewport, .gg-product-page .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { overflow: hidden; isolation: isolate; background: #ffffff; border: 1px solid var(--gg-line); border-radius: var(--gg-radius); box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.04); } .gg-product-page .woocommerce-product-gallery__image a { display: block; } .gg-product-page .woocommerce-product-gallery__image > a > img, .gg-product-page .woocommerce-product-gallery__image--placeholder img { display: block; width: 100%; height: auto; } .gg-product-page .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; } .gg-product-page .flex-control-thumbs li { margin: 0; } .gg-product-page .flex-control-thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid transparent; border-radius: 14px; background: #ffffff; box-shadow: 0 0 0 1px var(--gg-line); opacity: 0.6; cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .gg-product-page .flex-control-thumbs img:hover { opacity: 1; transform: translateY(-2px); } .gg-product-page .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--gg-red); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); } .gg-product-page .woocommerce-product-gallery__trigger { position: absolute; top: 18px; right: 18px; z-index: 9; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15); color: var(--gg-ink); text-decoration: none; transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease; } .gg-product-page .woocommerce-product-gallery__trigger span { display: none; } .gg-product-page .woocommerce-product-gallery__trigger::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / contain no-repeat; } .gg-product-page .woocommerce-product-gallery__trigger:hover { transform: scale(1.08); background: #ffffff; color: var(--gg-red); } .gg-product-media > .onsale { position: absolute; top: 18px; left: 18px; z-index: 10; padding: 8px 15px; border-radius: 999px; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #ffffff; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 0.5px; box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35); } /* Summary card */ .gg-product-page .summary { position: relative; min-width: 0; margin: 0; padding: 36px 36px 30px; overflow: hidden; background: #ffffff; border: 1px solid var(--gg-line); border-radius: var(--gg-radius); box-shadow: var(--gg-shadow); } .gg-product-page .summary::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #dc2626, #fbbf24, #22c55e); } .gg-product-page .summary > :last-child { margin-bottom: 0; } .gg-product-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; } .gg-product-page .gg-product-cat { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease; } .gg-product-page .gg-product-cat:hover { background: #fde68a; color: #78350f; } .gg-product-stock { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #15803d; } .gg-product-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); } .gg-product-stock.is-in::before { animation: gg-stock-pulse 2.4s ease-in-out infinite; } .gg-product-stock.is-backorder { color: #b45309; } .gg-product-stock.is-backorder::before { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); } .gg-product-stock.is-out { color: var(--gg-red-dark); } .gg-product-stock.is-out::before { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); } @keyframes gg-stock-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); } 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.06); } } .gg-product-page .product_title { margin: 0 0 12px; font-size: 34px; font-weight: 800; line-height: 1.18; letter-spacing: -0.5px; color: var(--gg-ink); } .gg-product-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 20px; font-size: 14px; } .gg-product-rating .star-rating { font-size: 17px; } .gg-rating-value { color: var(--gg-ink); font-weight: 700; } .gg-product-page .gg-product-rating .woocommerce-review-link { color: var(--gg-muted); text-decoration: none; border-bottom: 1px dashed #cbd5e1; transition: color 0.2s ease, border-color 0.2s ease; } .gg-product-page .gg-product-rating .woocommerce-review-link:hover { color: var(--gg-red); border-color: currentColor; } .gg-product-price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px dashed var(--gg-line); } .gg-product-page .summary p.price, .gg-product-page .woocommerce-variation-price .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; color: var(--gg-navy); } .gg-product-page .summary .price ins { order: 1; text-decoration: none; } .gg-product-page .summary .price del { order: 2; font-size: 0.55em; font-weight: 500; letter-spacing: 0; color: var(--gg-faint); } .gg-product-page .woocommerce-Price-currencySymbol { margin-left: 1px; font-size: 0.82em; } .gg-save-chip { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid #fecaca; border-radius: 999px; background: #fef2f2; color: var(--gg-red); font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; } .gg-product-page .woocommerce-product-details__short-description { margin: 0 0 22px; font-size: 15.5px; line-height: 1.75; color: var(--gg-text); } .gg-product-page .woocommerce-product-details__short-description p { margin: 0 0 10px; } .gg-product-page .woocommerce-product-details__short-description > :last-child { margin-bottom: 0; } /* At a Glance facts */ .gg-product-facts { margin: 0 0 24px; padding: 18px 20px 6px; border: 1px solid #eef2f7; border-radius: 18px; background: var(--gg-soft); } .gg-product-page .gg-product-facts-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gg-navy); } .gg-product-page .gg-product-facts-title::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #dc2626, #fbbf24); } .gg-product-facts dl { margin: 0; } .gg-product-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed #dbe2ea; font-size: 14px; line-height: 1.5; } .gg-product-fact:last-child { border-bottom: 0; } .gg-product-fact dt { flex-shrink: 0; margin: 0; color: var(--gg-muted); font-weight: 500; } .gg-product-fact dd { margin: 0; color: var(--gg-ink); font-weight: 600; text-align: right; } /* Stock line printed by WooCommerce inside the cart area */ .gg-product-page .summary .stock { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: #15803d; } .gg-product-page .summary .stock.out-of-stock { padding: 12px 16px; border-radius: 12px; background: #fef2f2; color: var(--gg-red-dark); } .gg-product-page .summary .stock.available-on-backorder { color: #b45309; } /* Add to cart row */ .gg-product-page form.cart { margin: 0 0 22px; } .gg-product-page form.cart:not(.variations_form):not(.grouped_form), .gg-product-page .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; } .gg-product-page .quantity { display: inline-flex; align-items: stretch; flex: 0 0 auto; position: relative; } .gg-product-page .quantity:has(> input[type="hidden"]) { display: none; } .gg-product-page .quantity:has(.gg-qty-btn) { height: 56px; overflow: hidden; background: #ffffff; border: 1.5px solid var(--gg-line); border-radius: 999px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .gg-product-page .quantity:focus-within { border-color: var(--gg-navy); box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.1); } .gg-product-page .quantity .qty { width: 52px; height: auto; min-height: 52px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: inherit; font-size: 17px; font-weight: 700; text-align: center; color: var(--gg-ink); -moz-appearance: textfield; appearance: textfield; } .gg-product-page .quantity .qty::-webkit-outer-spin-button, .gg-product-page .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .gg-product-page .quantity .qty:focus { outline: none; } .gg-product-page .gg-qty-btn { width: 46px; padding: 0; border: 0; background: transparent; color: var(--gg-ink); font-family: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .gg-product-page .gg-qty-btn:hover { background: #f1f5f9; color: var(--gg-red); } .gg-product-page .gg-qty-minus { order: -1; } .gg-product-page form.cart .single_add_to_cart_button { flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 32px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #ffffff !important; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px rgba(220, 38, 38, 0.32); transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; } .gg-product-page form.cart .single_add_to_cart_button::before { content: ""; width: 19px; height: 19px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat; } .gg-product-page form.cart .single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(220, 38, 38, 0.4); } .gg-product-page form.cart .single_add_to_cart_button:active { transform: translateY(0); } .gg-product-page form.cart .single_add_to_cart_button:focus-visible { outline: 3px solid rgba(30, 58, 138, 0.45); outline-offset: 3px; } .gg-product-page form.cart .single_add_to_cart_button.disabled, .gg-product-page form.cart .single_add_to_cart_button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* Variable products */ .gg-product-page table.variations { width: 100%; margin: 0 0 6px; border: 0; border-collapse: collapse; } .gg-product-page table.variations tbody, .gg-product-page table.variations tr, .gg-product-page table.variations th, .gg-product-page table.variations td { display: block; padding: 0; border: 0; text-align: left; } .gg-product-page table.variations tr { margin: 0 0 18px; } .gg-product-page table.variations th.label { margin: 0 0 10px; } .gg-product-page table.variations label { display: block; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gg-ink); } .gg-product-page table.variations td.value { position: relative; } .gg-product-page table.variations select { width: 100%; padding: 14px 44px 14px 16px; border: 1.5px solid var(--gg-line); border-radius: 14px; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 16px no-repeat; font-family: inherit; font-size: 15px; color: var(--gg-ink); cursor: pointer; -webkit-appearance: none; appearance: none; } .gg-product-page table.variations select:focus { outline: none; border-color: var(--gg-navy); box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.1); } .gg-product-page table.variations select.gg-var-select { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; } .gg-var-pills { display: flex; flex-wrap: wrap; gap: 8px; } .gg-var-pill { padding: 11px 18px; border: 1.5px solid var(--gg-line); border-radius: 12px; background: #ffffff; color: var(--gg-ink); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .gg-var-pill:hover { border-color: var(--gg-faint); } .gg-var-pill:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.15); border-color: var(--gg-navy); } .gg-var-pill.is-active { border-color: var(--gg-red); background: #fef2f2; color: var(--gg-red-dark); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } .gg-var-pill:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } /* Sits on the label row (right-aligned) so it takes no space while hidden. */ .gg-product-page .reset_variations { position: absolute; top: -29px; right: 0; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--gg-red) !important; text-decoration: none; } .gg-product-page .reset_variations::before { content: "\2715"; font-size: 10px; } .gg-product-page .woocommerce-variation.single_variation { margin: 0 0 16px; } .gg-product-page .woocommerce-variation-price .price { font-size: 28px; margin-bottom: 6px; } .gg-product-page .woocommerce-variation-description p { margin: 0 0 8px; font-size: 14px; } .gg-product-page .woocommerce-variation-availability .stock { margin: 0; } /* Grouped products */ .gg-product-page .group_table { width: 100%; margin: 0 0 14px; border-collapse: collapse; } .gg-product-page .group_table td { padding: 12px 8px; border-bottom: 1px dashed var(--gg-line); vertical-align: middle; font-size: 14px; } .gg-product-page .group_table td:first-child { padding-left: 0; } .gg-product-page .group_table .woocommerce-grouped-product-list-item__label a { color: var(--gg-ink); font-weight: 600; text-decoration: none; } .gg-product-page .group_table .woocommerce-grouped-product-list-item__price { text-align: right; color: var(--gg-navy); font-weight: 700; } .gg-product-page .group_table .quantity:has(.gg-qty-btn) { height: 44px; } .gg-product-page .group_table .quantity .qty { width: 40px; min-height: 40px; font-size: 15px; } .gg-product-page .group_table .gg-qty-btn { width: 36px; font-size: 17px; } /* Trust badges + help line */ .gg-product-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; padding: 20px 0 0; list-style: none; border-top: 1px solid #eef2f7; } .gg-product-trust li { display: flex; align-items: flex-start; gap: 10px; margin: 0; } .gg-trust-icon { flex: 0 0 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, #eff6ff 0%, #fef2f2 100%); color: var(--gg-navy); } .gg-trust-icon svg { width: 19px; height: 19px; } .gg-trust-text { min-width: 0; } .gg-trust-text strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--gg-ink); } .gg-trust-text small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--gg-muted); } .gg-product-page .gg-product-help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid #dbeafe; border-radius: 14px; background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%); font-size: 13.5px; line-height: 1.4; color: var(--gg-navy); } .gg-product-help svg { flex: 0 0 18px; width: 18px; height: 18px; } .gg-product-help span { flex: 1 1 auto; min-width: 0; } .gg-product-page .gg-product-help a[href^="tel:"] { font-weight: 800; color: var(--gg-red); text-decoration: none; white-space: nowrap; } .gg-product-page .gg-product-help a[href^="tel:"]:hover { text-decoration: underline; } .gg-product-page .gg-help-wa { padding: 6px 14px; border-radius: 999px; background: #22c55e; color: #ffffff; font-size: 12px; font-weight: 700; text-decoration: none; transition: background 0.2s ease; } .gg-product-page .gg-help-wa:hover { background: #16a34a; color: #ffffff; } /* SKU / categories / tags */ .gg-product-page .product_meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 16px 0 0; border-top: 1px solid #eef2f7; font-size: 12.5px; color: var(--gg-faint); } .gg-product-page .product_meta .sku { color: var(--gg-muted); font-weight: 600; } .gg-product-page .product_meta a { color: var(--gg-muted); font-weight: 600; text-decoration: none; transition: color 0.2s ease; } .gg-product-page .product_meta a:hover { color: var(--gg-red); } /* ── Tabs ── */ .gg-product-page .woocommerce-tabs { max-width: 980px; margin: 88px auto 0; } .gg-product-page .woocommerce-tabs ul.tabs { display: flex; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto 24px; padding: 6px; list-style: none; overflow-x: auto; scrollbar-width: none; background: #ffffff; border: 1px solid var(--gg-line); border-radius: 999px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06); } .gg-product-page .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; } .gg-product-page .woocommerce-tabs ul.tabs li { flex: 0 0 auto; margin: 0; padding: 0; } .gg-product-page .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: 999px; color: var(--gg-muted); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .gg-product-page .woocommerce-tabs ul.tabs li a:hover { color: var(--gg-ink); background: var(--gg-soft); } .gg-product-page .woocommerce-tabs ul.tabs li.active a { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); color: #ffffff; box-shadow: 0 6px 16px rgba(30, 58, 138, 0.3); } .gg-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #f1f5f9; color: var(--gg-muted); font-size: 11.5px; font-weight: 800; } .gg-product-page .woocommerce-tabs ul.tabs li.active .gg-tab-count { background: rgba(255, 255, 255, 0.2); color: #ffffff; } .gg-product-page .woocommerce-Tabs-panel { margin: 0; padding: 44px 48px; background: #ffffff; border: 1px solid var(--gg-line); border-radius: var(--gg-radius); box-shadow: var(--gg-shadow); animation: gg-panel-in 0.35s ease both; } @keyframes gg-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Rich text in description / custom tabs */ .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) { font-size: 16px; line-height: 1.85; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) > :first-child { margin-top: 0; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) > :last-child { margin-bottom: 0; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) :is(h2, h3, h4) { margin: 34px 0 12px; font-weight: 800; line-height: 1.3; color: var(--gg-ink); } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) h2 { font-size: 24px; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) h3 { font-size: 20px; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) h4 { font-size: 17px; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) p { margin: 0 0 16px; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) a { color: var(--gg-red); } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) img { border-radius: 16px; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) ul, .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) ol { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) ul li { position: relative; padding-left: 34px; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) ul li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 22px; height: 22px; border-radius: 50%; background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) ol { counter-reset: gg-ol; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) ol li { position: relative; padding-left: 40px; counter-increment: gg-ol; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) ol li::before { content: counter(gg-ol); position: absolute; left: 0; top: 0.15em; width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eff6ff; color: var(--gg-navy); font-size: 13px; font-weight: 800; line-height: 1; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) blockquote { margin: 30px 0; padding: 22px 28px; border-left: 4px solid var(--gg-red); border-radius: 0 16px 16px 0; background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%); color: var(--gg-navy); font-size: 18px; font-weight: 600; font-style: italic; line-height: 1.6; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) blockquote p:last-child { margin: 0; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) table:not(.shop_attributes) { width: 100%; margin: 0 0 22px; border-collapse: collapse; } .gg-product-page .woocommerce-Tabs-panel:not(.woocommerce-Tabs-panel--reviews) table:not(.shop_attributes) :is(th, td) { padding: 12px 10px; border-bottom: 1px solid var(--gg-line); text-align: left; } /* Additional information */ .gg-product-page .shop_attributes { width: 100%; margin: 0; border-collapse: collapse; } .gg-product-page .shop_attributes th, .gg-product-page .shop_attributes td { padding: 14px 0; border-bottom: 1px dashed var(--gg-line); font-size: 14.5px; text-align: left; vertical-align: top; } .gg-product-page .shop_attributes th { width: 34%; padding-right: 16px; color: var(--gg-muted); font-weight: 600; } .gg-product-page .shop_attributes td { color: var(--gg-ink); font-weight: 600; } .gg-product-page .shop_attributes td p { margin: 0; } .gg-product-page .shop_attributes tr:last-child :is(th, td) { border-bottom: 0; } /* ── Reviews ── */ .gg-reviews-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 44px; align-items: start; } .gg-review-summary { position: sticky; top: var(--gg-sticky-top); padding: 28px 24px; border: 1px solid #eef2f7; border-radius: 20px; background: var(--gg-soft); text-align: center; } .gg-review-score { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--gg-ink); } .gg-review-summary .star-rating { margin: 12px 0 6px; font-size: 20px; } .gg-product-page .gg-review-based { margin: 0 0 20px; font-size: 13px; color: var(--gg-muted); } .gg-review-bars { display: grid; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; text-align: left; } .gg-review-bars li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--gg-muted); } .gg-review-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--gg-line); } .gg-review-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #fbbf24); } .gg-review-bar-count { text-align: right; } .gg-product-page .gg-review-write { display: flex; justify-content: center; padding: 12px 20px; border: 1.5px solid var(--gg-ink); border-radius: 999px; color: var(--gg-ink); font-size: 12.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .gg-product-page .gg-review-write:hover { background: var(--gg-ink); color: #ffffff; } .gg-product-page .woocommerce-Reviews-title { margin: 0 0 20px; font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--gg-ink); } .gg-product-page .woocommerce-Reviews-title span { color: var(--gg-navy); } .gg-product-page .woocommerce-noreviews, .gg-product-page .woocommerce-verification-required { margin: 0 0 24px; padding: 18px 20px; border: 1px dashed var(--gg-line); border-radius: 16px; color: var(--gg-muted); } .gg-product-page .commentlist { display: grid; gap: 14px; margin: 0 0 32px; padding: 0; list-style: none; } .gg-product-page .commentlist li { margin: 0; padding: 0; border: 0; } .gg-product-page .commentlist .comment_container { display: flex; gap: 16px; padding: 20px 22px; border: 1px solid #eef2f7; border-radius: 18px; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .gg-product-page .commentlist .comment_container:hover { border-color: var(--gg-line); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); } .gg-review-avatar { flex: 0 0 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; font-size: 15px; font-weight: 800; letter-spacing: 0.5px; background: linear-gradient(135deg, #1e3a8a, #3b82f6); } .gg-review-avatar.is-tone-2 { background: linear-gradient(135deg, #b91c1c, #f87171); } .gg-review-avatar.is-tone-3 { background: linear-gradient(135deg, #047857, #34d399); } .gg-review-avatar.is-tone-4 { background: linear-gradient(135deg, #b45309, #fbbf24); } .gg-review-avatar.is-tone-5 { background: linear-gradient(135deg, #6d28d9, #a78bfa); } .gg-product-page .comment-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .gg-product-page .comment-text .meta { order: 1; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 12.5px; color: var(--gg-faint); } .gg-product-page .comment-text .star-rating { order: 2; font-size: 14px; } .gg-product-page .comment-text .description { order: 3; width: 100%; margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--gg-text); } .gg-product-page .comment-text .description p { margin: 0 0 8px; } .gg-product-page .comment-text .description p:last-child { margin: 0; } .gg-product-page .woocommerce-review__author { font-size: 15px; font-weight: 700; color: var(--gg-ink); } .gg-review-verified { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 700; } .gg-review-verified::before { content: "\2713"; font-weight: 800; } /* Review form */ .gg-product-page #review_form_wrapper { padding: 28px; border: 1px solid #eef2f7; border-radius: 20px; background: var(--gg-soft); } .gg-product-page .comment-reply-title { display: block; margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--gg-ink); } .gg-product-page #commentform { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .gg-product-page #commentform > * { grid-column: 1 / -1; margin: 0 0 16px; } .gg-product-page #commentform > .comment-form-author, .gg-product-page #commentform > .comment-form-email { grid-column: auto; } .gg-product-page #commentform > :last-child { margin-bottom: 0; } .gg-product-page .comment-notes, .gg-product-page .logged-in-as { font-size: 13px; color: var(--gg-muted); } .gg-product-page #commentform label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--gg-ink); } .gg-product-page #commentform .required { color: var(--gg-red); } .gg-product-page #review_form input[type="text"], .gg-product-page #review_form input[type="email"], .gg-product-page #review_form textarea { width: 100%; max-width: none; margin: 0; padding: 13px 16px; border: 1.5px solid var(--gg-line); border-radius: 12px; background: #ffffff; font-family: inherit; font-size: 15px; color: var(--gg-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .gg-product-page #review_form textarea { min-height: 130px; resize: vertical; } .gg-product-page #review_form input:focus, .gg-product-page #review_form textarea:focus { outline: none; border-color: var(--gg-navy); box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.1); } .gg-product-page #commentform .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; } .gg-product-page #commentform .comment-form-cookies-consent input { margin-top: 4px; accent-color: var(--gg-red); } .gg-product-page #commentform .comment-form-cookies-consent label { margin: 0; font-size: 13px; font-weight: 500; color: var(--gg-muted); } .gg-product-page #review_form #submit { padding: 14px 34px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(220, 38, 38, 0.3); transition: transform 0.25s ease, box-shadow 0.25s ease; } .gg-product-page #review_form #submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(220, 38, 38, 0.4); } /* Star picker WooCommerce builds from the rating