/* Groclean site styles. Colours, fonts and spacing come from theme.json presets. */ :root { --gc-ink: var(--wp--preset--color--ink); --gc-brand: var(--wp--preset--color--brand); --gc-muted: var(--wp--preset--color--muted); --gc-line: var(--wp--preset--color--line); --gc-announce-h: 44px; --gc-nav-h: 76px; --gc-nav-h-min: 60px; --gc-admin-bar: var(--wp-admin--admin-bar--height, 0px); --gc-ease: cubic-bezier(.2, .8, .2, 1); --gc-ease-out: cubic-bezier(.16, 1, .3, 1); --gc-spring: cubic-bezier(.34, 1.56, .64, 1); --gc-radius: 28px; } html { scroll-padding-top: calc(var(--gc-nav-h-min) + var(--gc-admin-bar) + 24px) } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility } .wp-site-blocks > * { margin-block-start: 0 } .wp-site-blocks { padding-top: calc(var(--gc-header-h, 120px)) } h1, h2, h3 { text-wrap: balance } img { max-width: 100%; height: auto } :where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--gc-brand); outline-offset: 3px; border-radius: 10px } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap } /* ---------- Header: offer bar + solid nav bar, "smart" condense on scroll ---------- */ .gc-header { position: fixed; top: calc(var(--gc-admin-bar) + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 100; transition: transform .35s var(--gc-ease); margin: 0 } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 101; background: var(--gc-brand) } .gc-header.is-condensed { transform: translateY(calc(-1 * var(--gc-announce-h))) } .gc-announce { background: var(--gc-brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--gc-announce-h); padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); margin: 0 } .gc-announce > * { margin: 0 } .gc-announce-track { position: relative; flex: 0 1 680px; min-width: 0; height: var(--gc-announce-h); overflow: hidden } .gc-announce .gc-announce-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; font-size: 15px; line-height: 1.3; padding: 0 4px; opacity: 0; transform: translateY(100%); transition: opacity .5s var(--gc-ease-out), transform .5s var(--gc-ease-out); pointer-events: none } .gc-announce:not(.is-ready) .gc-announce-msg:first-child { position: static; opacity: 1; transform: none } .gc-announce:not(.is-ready) .gc-announce-msg:not(:first-child) { display: none } .gc-announce .gc-announce-msg.is-active { opacity: 1; transform: none; pointer-events: auto } .gc-announce .gc-announce-msg.is-leaving { opacity: 0; transform: translateY(-100%) } .gc-announce-msg a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px } .gc-announce-msg a:hover { color: #FFFFFF; text-decoration-color: var(--wp--preset--color--sun) } .gc-announce-msg strong { color: var(--wp--preset--color--sun); font-weight: 800 } .gc-announce-arrow { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #FFFFFF; cursor: pointer; transition: background-color .2s } .gc-announce-arrow:hover { background: rgba(255, 255, 255, .14) } .gc-navbar { background: #FFFFFF; border-bottom: 1px solid #E3E8E0; transition: box-shadow .3s ease; margin: 0 !important; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)) } .gc-header.is-scrolled .gc-navbar { box-shadow: 0 8px 24px -16px rgba(18, 38, 28, .35) } .gc-navbar-inner { min-height: var(--gc-nav-h); gap: 20px; transition: min-height .3s var(--gc-ease) } .gc-header.is-condensed .gc-navbar-inner { min-height: var(--gc-nav-h-min) } .gc-brand { flex: none } .gc-brand .wp-block-site-logo img { transition: width .3s var(--gc-ease), height .3s var(--gc-ease) } .gc-header.is-condensed .gc-brand .wp-block-site-logo img { width: 36px !important; height: 36px !important } .gc-site-title a { text-decoration: none } .gc-header-actions { flex: none } /* Navigation links: underline slides in on hover */ .gc-nav .wp-block-navigation-item__content { position: relative; padding-block: 8px; text-decoration: none; color: var(--gc-ink) } .gc-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gc-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--gc-ease) } .gc-nav .wp-block-navigation-item__content:hover::after, .gc-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1) } .gc-nav .wp-block-navigation__submenu-container { border: 1px solid var(--gc-line) !important; border-radius: 18px; padding: 8px !important; box-shadow: 0 20px 40px -20px rgba(18, 38, 28, .3); min-width: 230px !important } .gc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 12px !important; border-radius: 10px } .gc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none } .gc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--stone) } .gc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .gc-nav-account { display: none } .gc-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; place-items: center; justify-content: center; align-items: center; border-radius: 50%; background: var(--wp--preset--color--stone) } /* Collapse the menu into the ☰ overlay below 1024px (WordPress's own breakpoint is 600px, too narrow for this menu). */ @media (max-width: 1023px) { .gc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important } .gc-nav .wp-block-navigation__responsive-container-open { display: flex !important } .gc-nav { order: 3 } .gc-header-actions { margin-left: auto } .gc-header-actions .gc-hide-mobile { display: none !important } } .gc-nav .wp-block-navigation__responsive-container.is-menu-open { padding: calc(24px + var(--gc-admin-bar)) 24px 24px; background: var(--wp--preset--color--cream) !important } .gc-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 48px } .gc-nav .is-menu-open .wp-block-navigation-item { width: 100%; font-size: 22px; font-weight: 800; border-bottom: 1px solid var(--gc-line); padding-block: 6px } .gc-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: 0 0 8px 12px !important } .gc-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { font-size: 17px; font-weight: 600; border: 0 } @media (max-width: 781px) { :root { --gc-nav-h: 64px; --gc-nav-h-min: 56px } .gc-navbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) } .gc-navbar-inner { gap: 10px } .gc-brand .wp-block-site-logo img { width: 38px !important; height: 38px !important } .gc-site-title { font-size: 17px !important } .gc-header-actions .wp-block-button__link { padding: 11px 14px !important; font-size: 14px !important } .gc-announce .gc-announce-msg { font-size: 13px } } /* ---------- Buttons ---------- */ .wp-block-button__link { transition: transform .35s var(--gc-spring), box-shadow .35s var(--gc-ease-out), background-color .2s } .wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(18, 38, 28, .45) } .wp-block-button__link:active { transform: translateY(0) scale(.98); transition-duration: .1s } .wp-block-button.is-style-soft .wp-block-button__link { background: var(--wp--preset--color--stone); color: var(--gc-ink) } .wp-block-button.is-style-soft .wp-block-button__link:hover { background: #E7ECE3; color: var(--gc-ink) } .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-white .wp-block-button__link { background: #FFFFFF; color: var(--gc-ink); border: 1px solid #D5DDD2 } .wp-block-button.is-style-sun .wp-block-button__link { background: var(--wp--preset--color--sun); color: var(--gc-ink); font-weight: 800 } .wp-block-button.is-style-sun .wp-block-button__link:hover { background: #FFD94D; color: var(--gc-ink) } .wp-block-button.is-style-outline-light .wp-block-button__link { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .5) } .wp-block-button.is-style-dark .wp-block-button__link { background: var(--gc-ink); color: #FFFFFF } .wp-block-button.is-style-dark .wp-block-button__link:hover { background: var(--gc-brand) } .gc-btn-icon .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px } /* ---------- Shared pieces ---------- */ .gc-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: fit-content; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--brand-dark); background: var(--wp--preset--color--mint); padding: 8px 14px; border-radius: 999px; margin: 0 } .gc-eyebrow.is-sun { background: var(--wp--preset--color--sun); color: var(--gc-ink); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px } .gc-eyebrow.is-sky { background: transparent; color: var(--wp--preset--color--sky-ink); padding: 0; letter-spacing: .04em; text-transform: uppercase; font-size: 14px } .gc-section { padding-block: var(--wp--preset--spacing--60) } .gc-card { background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: var(--gc-radius); padding: 28px } .gc-card > * { margin-block: 0 } .gc-card > * + * { margin-block-start: 12px } .gc-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--brand-dark) } .gc-icon.is-sky { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--sky-ink) } .gc-icon.is-sun { background: #FFF4CC; color: #8A6400 } .gc-icon.is-lilac { background: #F1EAFB; color: #6B3FB0 } .gc-icon svg { width: 26px; height: 26px } .gc-rounded img, img.gc-rounded { border-radius: 32px } .gc-stars { color: #C98A00; letter-spacing: 2px } .gc-check-list { list-style: none; padding-left: 0 } .gc-check-list li { position: relative; padding-left: 30px } .gc-check-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--wp--preset--color--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6B3D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat } .gc-cross-list li::before { background: #FDECEC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center / 10px no-repeat } /* ---------- Home hero ---------- */ .gc-hero h1 .gc-line { display: block } .gc-price-chip { display: inline-flex !important; align-items: baseline; gap: 6px; background: var(--wp--preset--color--sun); padding: 10px 18px; border-radius: 16px; position: relative; isolation: isolate; margin: 0 } .gc-price-chip strong { font-weight: 800; font-size: 40px; letter-spacing: -.03em; line-height: 1 } .gc-hero-media { position: relative } .gc-hero-media .wp-block-image { margin: 0 } .gc-hero-media .wp-block-image img { width: 100%; height: clamp(380px, 48vw, 600px); object-fit: cover; border-radius: 36px; display: block } .gc-float { position: absolute; z-index: 2; margin: 0 !important } .gc-float-1 { top: 28px; left: -12px; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 20px; padding: 14px 18px } .gc-float-2 { bottom: 28px; right: 20px; background: var(--gc-ink); color: #FFFFFF; border-radius: 20px; padding: 16px 20px } .gc-float p { margin: 0 } @media (max-width: 600px) { .gc-float-1 { left: 12px; top: 12px } .gc-float-2 { right: 12px; bottom: 12px } } /* ---------- Steps ---------- */ .gc-step { background: var(--wp--preset--color--forest); border-radius: var(--gc-radius); padding: 32px } .gc-step > * { margin-block: 0 } .gc-step > * + * { margin-block-start: 14px } .gc-step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--wp--preset--color--sun); color: var(--gc-ink); font-weight: 800; font-size: 20px; display: grid !important; place-items: center } /* ---------- Plans ---------- */ .gc-plan { display: flex; flex-direction: column } .gc-plan.is-featured { border: 2px solid var(--gc-brand) } .gc-plan .wp-block-buttons { margin-top: auto !important; padding-top: 12px } .gc-plan .wp-block-button, .gc-plan .wp-block-button__link { width: 100% } .gc-plan .wp-block-image img { width: 100%; height: 220px; object-fit: contain } .gc-plan-price { margin: 0 } .gc-plan-price strong { font-weight: 800; font-size: 44px; letter-spacing: -.03em; color: var(--gc-ink) } .gc-pill { display: inline-block; font-size: 13px; font-weight: 700; color: #FFFFFF; background: var(--gc-brand); padding: 6px 12px; border-radius: 999px; margin: 0 } .gc-price-rows { list-style: none; padding: 0; margin: 0; font-size: 15px; color: var(--gc-muted) } .gc-price-rows li { display: flex; justify-content: space-between; gap: 12px; padding-block: 3px } .gc-price-rows strong { color: var(--gc-ink) } /* ---------- Product cards (filters) ---------- */ .gc-product { background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; gap: 0 !important } .gc-product-media { position: relative; margin: 0 !important; aspect-ratio: 1 / 1; background: var(--wp--preset--color--stone); overflow: hidden } .gc-product-media .wp-block-image, .gc-product-media figure { margin: 0; height: 100% } .gc-product-media img { width: 100%; height: 100% !important; object-fit: cover; display: block; transition: transform .7s var(--gc-ease-out) } .gc-product:hover .gc-product-media img { transform: scale(1.04) } .gc-badge { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #FFFFFF; background: #C2410C; padding: 6px 10px; border-radius: 8px; margin: 0 !important; text-transform: uppercase } .gc-badge.is-blue { background: var(--wp--preset--color--sky-ink) } .gc-product-body { padding: 16px; display: flex; flex-direction: column; gap: 8px !important; flex: 1; margin: 0 !important } .gc-product-body > * { margin: 0 !important } .gc-product-body h3 { font-size: 18px; letter-spacing: -.01em } .gc-product-body h3 a { color: inherit; text-decoration: none } .gc-product-body p { font-size: 14px; color: var(--gc-muted) } .gc-chip { align-self: flex-start; font-size: 13px !important; font-weight: 700; color: var(--wp--preset--color--brand-dark) !important; background: var(--wp--preset--color--mint); padding: 5px 10px; border-radius: 999px } .gc-buy { margin-top: auto !important; display: flex !important; border: 1.5px solid var(--gc-ink); border-radius: 14px; overflow: hidden; min-height: 48px; gap: 0 !important } .gc-buy > * { margin: 0 !important; flex: 1 } .gc-buy-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 12px 8px; font-size: 17px !important; color: var(--gc-ink) !important } .gc-buy-price strong { font-weight: 800 } .gc-buy-price s { font-size: 13px; color: #5F7068 } .gc-buy .wp-block-button { display: flex } .gc-buy .wp-block-button__link { width: 100%; border-radius: 0 !important; background: var(--gc-ink); display: flex; align-items: center; justify-content: center; padding: 10px !important; font-size: 14px !important; font-weight: 800; letter-spacing: .04em; text-transform: uppercase } .gc-buy .wp-block-button__link:hover { transform: none; box-shadow: none; background: var(--gc-brand) } /* ---------- Account preview ---------- */ .gc-portal { background: var(--wp--preset--color--sky); border-radius: 40px; padding: clamp(28px, 5vw, 56px) } .gc-portal-card { background: #FFFFFF; border: 1px solid #CFE3EE; border-radius: var(--gc-radius); padding: 28px } .gc-stat { background: var(--wp--preset--color--cream); border-radius: 18px; padding: 16px } .gc-stat > * { margin: 0 } .gc-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--brand-dark); background: var(--wp--preset--color--mint); padding: 6px 10px; border-radius: 999px; margin: 0 } .gc-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gc-brand) } /* ---------- Reviews ---------- */ .gc-review { display: flex; flex-direction: column; gap: 16px } .gc-review blockquote, .gc-review .wp-block-quote { margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.6 } .gc-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid !important; place-items: center; font-weight: 800; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--brand-dark); margin: 0 } /* ---------- FAQ (core Details block) ---------- */ .gc-faq .wp-block-details { border-top: 1px solid #DDE3D9; padding-block: 22px; margin: 0 } .gc-faq .wp-block-details:last-child { border-bottom: 1px solid #DDE3D9 } .gc-faq .wp-block-details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; font-size: 18px; cursor: pointer } .gc-faq .wp-block-details summary::-webkit-details-marker { display: none } .gc-faq .wp-block-details summary::after { content: "+"; font-size: 26px; font-weight: 500; line-height: 1; color: var(--gc-brand); transition: transform .35s var(--gc-ease-out) } .gc-faq .wp-block-details[open] summary::after { transform: rotate(45deg) } .gc-faq .wp-block-details > :not(summary) { margin-block: 12px 0; color: var(--gc-muted) } /* ---------- Inner pages ---------- */ .gc-page-hero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) } .gc-spec-table table { border-collapse: separate; border-spacing: 0; width: 100%; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 20px; overflow: hidden } .gc-spec-table th, .gc-spec-table td { border: 0; border-bottom: 1px solid var(--gc-line); padding: 14px 18px; text-align: left; vertical-align: top } .gc-spec-table tr:last-child td { border-bottom: 0 } .gc-spec-table thead th { background: var(--wp--preset--color--stone); font-weight: 800 } .gc-spec-table td:first-child { font-weight: 700; width: 38% } .gc-spec-table.is-prices td:first-child { width: auto } .gc-spec-table .wp-block-table { overflow-x: auto } .gc-spec-table td s { color: #5F7068 } .gc-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 } .gc-tags li { background: #FFFFFF; border: 1px solid var(--gc-line); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 15px } .gc-gallery .wp-block-image img { border-radius: 20px; aspect-ratio: 4 / 5; object-fit: cover; background: #FFFFFF } .gc-map iframe { width: 100%; height: 360px; border: 0; border-radius: var(--gc-radius) } /* ---------- Footer ---------- */ .gc-footer { margin-top: 0 } .gc-footer a { text-decoration: none } .gc-footer a:hover { text-decoration: underline; color: #FFFFFF } .gc-footer p { margin: 0 } .gc-footer-rule { border-color: rgba(255, 255, 255, .25) !important; background: rgba(255, 255, 255, .25) !important; margin-block: 40px !important; opacity: 1 } .gc-footer-logo img { background: #FFFFFF; border-radius: 50% } .gc-copyright { color: #D3EBDC; margin-top: 40px !important } /* ---------- WhatsApp ---------- */ .gc-wa { position: fixed; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 12px; text-decoration: none } .gc-wa-btn { width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #FFFFFF; display: grid; place-items: center; box-shadow: 0 10px 24px -6px rgba(18, 38, 28, .45); transition: transform .35s var(--gc-spring) } .gc-wa:hover .gc-wa-btn { transform: scale(1.08) } .gc-wa-label { background: #FFFFFF; color: var(--gc-ink); font-size: 14px; padding: 10px 14px; border-radius: 14px 14px 4px 14px; box-shadow: 0 10px 24px -10px rgba(18, 38, 28, .35); white-space: nowrap; opacity: 0; transform: translateX(12px); transition: opacity .4s, transform .4s var(--gc-ease-out); pointer-events: none } .gc-wa:hover .gc-wa-label, .gc-wa.is-hinting .gc-wa-label, .gc-wa:focus-visible .gc-wa-label { opacity: 1; transform: none } .gc-mobile-bar { display: none } @media (max-width: 640px) { .gc-wa { display: none } .gc-mobile-bar { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--gc-line) } .gc-mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; font-weight: 800; font-size: 16px; text-decoration: none } .gc-mobile-bar svg { width: 20px; height: 20px } .gc-mobile-call { color: var(--gc-ink); background: var(--wp--preset--color--stone) } .gc-mobile-wa { color: #FFFFFF; background: #1C9E52 } .wp-site-blocks { padding-bottom: 76px } } /* ---------- Enquiry form (groclean-portal) ---------- */ .gc-form-card { background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: var(--gc-radius); padding: clamp(20px, 4vw, 32px) } /* ---------- Motion (only when the visitor allows it; everything is visible at rest) ---------- */ @media (prefers-reduced-motion: no-preference) { @keyframes gc-up { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } } @keyframes gc-pop { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } } @keyframes gc-slide-l { from { opacity: 0; transform: translateX(-40px) } to { opacity: 1; transform: none } } @keyframes gc-slide-r { from { opacity: 0; transform: translateX(40px) } to { opacity: 1; transform: none } } @keyframes gc-photo { from { opacity: 0; transform: scale(1.05); clip-path: inset(8% 8% 8% 8% round 36px) } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 36px) } } @keyframes gc-bob { 0%, 100% { translate: 0 0 } 50% { translate: 0 -8px } } @keyframes gc-ripple { from { transform: scale(1); opacity: .55 } to { transform: scale(1.9, 2.6); opacity: 0 } } @keyframes gc-rise { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } } @keyframes gc-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 122, 70, .45) } 50% { box-shadow: 0 0 0 6px rgba(18, 122, 70, 0) } } @keyframes gc-wa-in { from { opacity: 0; transform: scale(.4) rotate(-30deg) } to { opacity: 1; transform: none } } @keyframes gc-wa-ring { from { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55), 0 10px 24px -6px rgba(18, 38, 28, .45) } to { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 10px 24px -6px rgba(18, 38, 28, .45) } } .gc-motion .gc-hero-copy > * { animation: gc-up .9s var(--gc-ease-out) both; animation-delay: var(--d, 0s) } .gc-motion .gc-hero h1 .gc-line { animation: gc-up .9s var(--gc-ease-out) both; animation-delay: var(--d, 0s) } .gc-motion .gc-hero h1 { animation: none } .gc-motion .gc-price-chip { animation: gc-pop .7s var(--gc-spring) .95s both } .gc-motion .gc-hero-media .wp-block-image img { animation: gc-photo 1.2s var(--gc-ease-out) .15s both } .gc-motion .gc-float-1 { animation: gc-slide-l .9s var(--gc-ease-out) 1.1s both, gc-bob 5s ease-in-out 2.2s infinite } .gc-motion .gc-float-2 { animation: gc-slide-r .9s var(--gc-ease-out) 1.3s both, gc-bob 6s ease-in-out 2.6s infinite } .gc-price-chip::before, .gc-price-chip::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 2px solid #F2C94C; z-index: -1; opacity: 0; animation: gc-ripple 2.8s var(--gc-ease-out) 1.8s infinite } .gc-price-chip::after { animation-delay: 3.2s } .gc-reveal.is-in { animation: gc-rise .9s var(--gc-ease-out) both; animation-delay: var(--d, 0s) } .gc-reveal.is-in .gc-step-num { animation: gc-pop .6s var(--gc-spring) both; animation-delay: calc(var(--d, 0s) + .25s) } .gc-card, .gc-product, .gc-plan { transition: transform .5s var(--gc-ease-out), box-shadow .5s var(--gc-ease-out) } .gc-card:hover, .gc-product:hover, .gc-plan:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(18, 38, 28, .35) } .gc-live::before { animation: gc-breathe 2s ease-in-out infinite } .gc-wa-btn { animation: gc-wa-in .7s var(--gc-spring) 1.6s both, gc-wa-ring 2.4s ease-out 2.6s 4 } :root { interpolate-size: allow-keywords } .gc-faq .wp-block-details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--gc-ease-out), content-visibility .45s allow-discrete } .gc-faq .wp-block-details[open]::details-content { block-size: auto } } @media (prefers-reduced-motion: reduce) { .gc-header, .gc-navbar-inner, .gc-brand img, .gc-announce .gc-announce-msg { transition: none !important } } /* ---------- Page building blocks ---------- */ .gc-pb { padding-bottom: var(--wp--preset--spacing--60) } .gc-on-dark h2, .gc-on-dark h3 { color: #FFFFFF } .gc-on-dark p { color: #C5D6CB } .gc-on-dark .gc-step-num { color: var(--gc-ink) } .gc-on-dark a { color: var(--wp--preset--color--sun) } .gc-narrow { max-width: 760px; margin-inline: auto !important } .gc-page-hero-grid { align-items: center } .gc-page-hero h1 { font-size: clamp(40px, 5.4vw, 72px) } .gc-page-hero-media .wp-block-image { margin: 0 } .gc-page-hero-media img { width: 100%; height: clamp(300px, 38vw, 500px); object-fit: cover; border-radius: 36px; display: block } .gc-page-hero-media.is-contain img { object-fit: contain; background: #FFFFFF; border: 1px solid var(--gc-line); padding: clamp(16px, 3vw, 32px); box-sizing: border-box } .gc-price-chip s { font-size: 15px; color: #5F6B3C; font-weight: 500 } .gc-card.is-current { border: 2px solid var(--gc-brand) } .gc-card .gc-step-num { margin-bottom: 4px } .gc-cert img { max-height: 90px; width: auto; border-radius: 12px } .gc-thumb img { width: 100%; height: 104px !important; object-fit: cover; border-radius: 14px } .gc-avatar.is-sky { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--sky-ink) } .gc-avatar.is-sun { background: #FFF4CC; color: #8A6400 } .gc-buy .wp-block-buttons { display: flex; flex-wrap: nowrap; gap: 0 } .gc-buy .wp-block-button { flex: 1; width: 100% } .gc-form-card h3 { font-size: 24px } .gc-review .has-large-font-size { font-size: 17px !important } .gc-faq { width: 100%; align-self: stretch } .gc-hero-copy > .wp-block-group, .gc-hero-copy > .gc-faq { max-width: 100% } /* ---------- Korvia models ---------- */ .gc-model-media { aspect-ratio: 4 / 3; background: #FFFFFF; border-bottom: 1px solid var(--gc-line) } .gc-model-media img { object-fit: contain !important; padding: 20px; box-sizing: border-box } .gc-model-body { padding: 22px !important; gap: 12px !important } .gc-model-tagline { font-size: 13px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--brand-dark) !important } .gc-model-body h3 { font-size: 26px !important } .gc-model-points { font-size: 15px; margin: 4px 0 !important } .gc-model-points li + li { margin-top: 6px } .gc-model-price { margin-top: auto !important; font-size: 15px !important; color: var(--gc-muted) } .gc-model-price strong { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--gc-ink); margin-right: 6px } .gc-model-body .wp-block-buttons { gap: 8px } .gc-model-body .wp-block-button__link { padding: 14px 18px; font-size: 15px } .gc-uvuf { margin-top: 20px !important } .gc-uvuf > .wp-block-group { flex: 1 1 420px } .gc-buy-price small { font-size: 12px; color: #5F7068; font-weight: 600 } .gc-hero, .gc-page-hero { overflow-x: clip } .gc-model-meta { font-size: 14px !important; font-weight: 600; color: var(--gc-ink) !important } .gc-account-section { padding-top: var(--wp--preset--spacing--40) } /* WordPress grid groups are size containers; inside column flex layouts that makes them grow far taller than their content. Our grids size by minimum column width, so they don't need it. */ .wp-block-group.is-layout-grid { container-type: normal } /* ===================================================================== Design refresh: layout system, rhythm and new components ===================================================================== */ /* Fixed, responsive column counts (no empty tracks, no lonely last card) */ .wp-block-group.gc-cols { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important } .gc-cols-2 { --cols: 2 } .gc-cols-3 { --cols: 3 } .gc-cols-4 { --cols: 4 } .gc-cols-5 { --cols: 5 } @media (max-width: 1180px) { .gc-cols-5 { --cols: 3 } } @media (max-width: 1023px) { .gc-cols-3, .gc-cols-4, .gc-cols-5 { --cols: 2 } } @media (max-width: 640px) { .wp-block-group.gc-cols { --cols: 1 } .gc-cols-4.gc-cols-keep2, .gc-cols-5.gc-cols-keep2 { --cols: 2 } } /* Section rhythm: one consistent vertical spacing */ .gc-section { padding-block: clamp(56px, 7vw, 96px) } .gc-pb { padding-bottom: clamp(56px, 7vw, 96px) } .gc-page-hero { padding-block: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px) } .gc-band { background: #FFFFFF; border-block: 1px solid var(--gc-line) } .gc-band-sky { background: var(--wp--preset--color--sky) } .gc-section > .wp-block-group + .wp-block-group, .gc-pb > .wp-block-group + .wp-block-group { margin-top: clamp(28px, 3vw, 40px) } /* Section intro */ .gc-intro { margin-bottom: clamp(24px, 3vw, 36px) !important } .gc-intro.is-center { margin-inline: auto !important; text-align: center } .gc-intro > * + * { margin-top: 12px !important } .gc-intro h2 { margin: 0 } .gc-kicker { margin: 0; font-size: 13px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--brand-dark) } /* Cards: compact, icon-led; only links/products lift on hover */ .gc-card { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 10px } .gc-card > * + * { margin-block-start: 0 !important } .gc-card h3 { font-size: 20px !important; letter-spacing: -.01em; line-height: 1.2 } .gc-card p { font-size: 16px; line-height: 1.55 } .gc-card .gc-icon { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 6px } .gc-card .gc-icon svg { width: 22px; height: 22px } @media (prefers-reduced-motion: no-preference) { .gc-card:hover { transform: none; box-shadow: none } .gc-product:hover, .gc-plan:hover, .gc-card.is-link:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(18, 38, 28, .35) } } /* Trust strip under the hero */ .gc-trust { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 24px; overflow: hidden } .gc-trust-item { display: flex; align-items: center; gap: 12px; padding: 18px 20px; font-weight: 700; font-size: 15px; line-height: 1.3 } .gc-trust-item + .gc-trust-item { border-left: 1px solid var(--gc-line) } .gc-trust-item svg { width: 26px; height: 26px; flex: none; color: var(--wp--preset--color--brand-dark) } .gc-trust-item small { display: block; font-weight: 500; font-size: 13px; color: var(--gc-muted) } @media (max-width: 1023px) { .gc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)) } .gc-trust-item + .gc-trust-item { border-left: 0 } .gc-trust-item { border-top: 1px solid var(--gc-line) } .gc-trust-item:nth-child(-n+2) { border-top: 0 } .gc-trust-item:nth-child(even) { border-left: 1px solid var(--gc-line) } .gc-trust-item:last-child:nth-child(odd) { grid-column: 1 / -1 } } /* Rent vs buy comparison */ .gc-compare { background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 28px; overflow: hidden } .gc-compare table { width: 100%; border-collapse: collapse; font-size: 16px } .gc-compare th, .gc-compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--gc-line); vertical-align: middle } .gc-compare tr:last-child td { border-bottom: 0 } .gc-compare thead th { font-size: 18px; font-weight: 800; background: var(--wp--preset--color--stone) } .gc-compare thead th.is-rent { background: var(--gc-brand); color: #FFFFFF } .gc-compare td:first-child { color: var(--gc-muted); font-weight: 600; width: 34% } .gc-compare td.is-rent { background: #F3FAF5; font-weight: 700 } .gc-compare .gc-yes, .gc-compare .gc-no { display: inline-flex; align-items: center; gap: 8px } .gc-compare .gc-yes::before, .gc-compare .gc-no::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50% } .gc-compare .gc-yes::before { background: var(--wp--preset--color--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6B3D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat } .gc-compare .gc-no::before { background: #F3F1EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat } .gc-compare-scroll { overflow-x: auto } @media (max-width: 640px) { .gc-compare th, .gc-compare td { padding: 12px 14px; font-size: 14px } .gc-compare thead th { font-size: 15px } } /* "Which Korvia for your water?" picker */ .gc-picker { background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 28px; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: center } .gc-picker-tabs { display: flex; flex-direction: column; gap: 10px } .gc-picker-tab { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--gc-line); background: var(--wp--preset--color--cream); cursor: pointer; transition: border-color .2s, background-color .2s } .gc-picker-tab svg { width: 24px; height: 24px; flex: none; color: var(--wp--preset--color--sky-ink) } .gc-picker-tab strong { display: block; font-size: 17px } .gc-picker-tab span span { display: block; font-size: 14px; color: var(--gc-muted) } .gc-picker-tab[aria-selected="true"] { border-color: var(--gc-brand); background: #F3FAF5 } .gc-picker-panel[hidden] { display: none !important } .gc-picker-panel { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center } .gc-picker-panel img { width: 160px; height: 200px; object-fit: contain } .gc-picker-panel h3 { margin: 4px 0 8px; font-size: 26px } .gc-picker-panel p { margin: 0 0 10px; color: var(--gc-muted) } .gc-picker-panel .gc-picker-price { color: var(--gc-ink); font-size: 15px } .gc-picker-panel .gc-picker-price strong { font-size: 28px; font-weight: 800 } .gc-picker-panel .gc-picker-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px } .gc-picker-panel .gc-picker-links a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 14px; font-weight: 700; text-decoration: none; background: var(--gc-brand); color: #FFFFFF } .gc-picker-panel .gc-picker-links a + a { background: var(--wp--preset--color--stone); color: var(--gc-ink) } @media (max-width: 860px) { .gc-picker { grid-template-columns: 1fr } .gc-picker-panel { grid-template-columns: 110px minmax(0, 1fr); gap: 16px } .gc-picker-panel img { width: 110px; height: 150px } } /* Reviews: horizontal, swipeable */ .gc-reviews-track { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); grid-template-columns: none !important; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding-bottom: 8px; scrollbar-width: thin } .gc-reviews-track > * { scroll-snap-align: start } @media (min-width: 1024px) { .gc-reviews-track { grid-auto-columns: calc((100% - 32px) / 3) } } @media (max-width: 640px) { .gc-reviews-track { grid-auto-columns: 86% } } .gc-review p.has-large-font-size { font-size: 17px !important; line-height: 1.6 } .gc-review-source { font-size: 13px !important; color: var(--gc-muted) } .gc-slider-nav { display: flex; gap: 8px } .gc-slider-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #D5DDD2; background: #FFFFFF; display: grid; place-items: center; cursor: pointer; color: var(--gc-ink) } .gc-slider-nav button:hover { border-color: var(--gc-brand); color: var(--gc-brand) } .gc-slider-nav button[disabled] { opacity: .4; cursor: default } /* Contact layout: info rows + form, map below */ .gc-info { background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 28px; padding: 8px clamp(16px, 2.4vw, 28px) } .gc-info-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--gc-line); margin: 0 !important } .gc-info > .gc-info-row:last-of-type, .gc-info > :last-child .gc-info-row { border-bottom: 0 } .gc-info-icon { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--brand-dark) } .gc-info-icon svg { width: 22px; height: 22px } .gc-info-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0 } .gc-info-label { font-size: 13px; font-weight: 700; color: var(--gc-muted); text-transform: uppercase; letter-spacing: .05em } .gc-info-value { font-size: 17px; font-weight: 700; color: var(--gc-ink); overflow-wrap: anywhere } .gc-info-value a { color: var(--gc-ink); text-decoration: none } .gc-info-value small { display: block; font-weight: 500; font-size: 14px; color: var(--gc-muted) } .gc-info-action { flex: none; font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 12px; background: var(--wp--preset--color--stone); color: var(--gc-ink) !important; text-decoration: none } .gc-info-action:hover { background: var(--wp--preset--color--mint) } @media (max-width: 480px) { .gc-info-action { display: none } } .gc-map { border-radius: 28px; overflow: hidden; border: 1px solid var(--gc-line); background: linear-gradient(135deg, #E4F2FA, #E3F3E8); min-height: 320px; position: relative } .gc-map iframe { display: block; width: 100%; height: 380px; border: 0; border-radius: 0 } .gc-map-cta { position: absolute; left: 16px; bottom: 16px; z-index: 1; background: #FFFFFF; border-radius: 14px; padding: 12px 16px; font-weight: 700; color: var(--gc-ink) !important; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(18, 38, 28, .4) } /* Product detail: quick facts and side-by-side lists */ .gc-facts-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 } .gc-facts-row li { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px } .gc-facts-row li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gc-brand) } .gc-spec-table td:first-child { color: var(--gc-muted); font-weight: 600 } .gc-spec-table td { font-size: 16px } .gc-cert-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 24px; padding: 20px 24px } .gc-cert-strip img { height: 56px !important; width: auto !important; border-radius: 8px } .gc-cert-strip p { margin: 0; flex: 1 1 320px } .gc-location { align-items: stretch } .gc-location .gc-info { display: flex; flex-direction: column; justify-content: center } .gc-location .gc-map, .gc-location .gc-map iframe { height: 100%; min-height: 300px } .gc-intro-row { margin-bottom: clamp(24px, 3vw, 36px) !important; gap: 20px } .gc-intro-row .gc-intro { margin-bottom: 0 !important } .gc-trust-section { padding-block: 0 clamp(40px, 5vw, 64px) } .gc-product-body p.gc-chip { font-size: 13px } .gc-h3 { font-size: clamp(22px, 2.4vw, 28px) !important } .gc-contact-grid { align-items: start } .gc-anchor { scroll-margin-top: 90px; height: 0 } .gc-spec-2col table { table-layout: fixed } @media (min-width: 900px) { .gc-spec-2col tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0 } .gc-spec-2col tr { display: grid; grid-template-columns: 40% 60%; border-bottom: 1px solid var(--gc-line) } .gc-spec-2col tr:nth-child(odd) { border-right: 1px solid var(--gc-line) } .gc-spec-2col td { border-bottom: 0 !important } } .gc-page-hero .gc-facts-row { margin-top: 4px } /* Intros follow the section's content width (so they line up with what's below); their text keeps a readable measure */ .gc-intro > * { max-width: 720px } .gc-intro.is-center > * { margin-inline: auto !important } .gc-intro-row .gc-intro { flex: 1 1 520px } .gc-reviews-track > * { margin: 0 !important } .wp-block-group.gc-cols > * { margin: 0 !important } .gc-card.gc-uvuf { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px } .gc-card.gc-uvuf > .wp-block-group { flex: 1 1 420px } @media (min-width: 900px) { .gc-spec-2col tr { grid-template-columns: minmax(140px, 38%) minmax(0, 1fr) } .gc-spec-2col td:first-child { width: auto } } @media (max-width: 1023px) { .gc-location .gc-map, .gc-location .gc-map iframe { height: 300px; min-height: 0 } } /* Padded boxes count their padding and border inside the content width, so they line up */ .gc-picker, .gc-compare, .gc-trust, .gc-info, .gc-map, .gc-card, .gc-cert-strip, .gc-portal, .gc-form-card { box-sizing: border-box } .gc-per { color: var(--gc-muted); font-size: 14px; font-weight: 500 } .gc-parts-table th:first-child, .gc-parts-table td:first-child { width: 72px; color: var(--gc-muted) } .gc-parts-table th:last-child, .gc-parts-table td:last-child { width: 32%; white-space: nowrap } /* ---------- Filters & spare parts catalogue ---------- */ .gc-parts-filter { display: flex; flex-wrap: wrap; gap: 8px } .gc-chip-btn { font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--gc-line); background: #FFFFFF; color: var(--gc-ink); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s } .gc-chip-btn span { font-size: 12px; font-weight: 800; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--wp--preset--color--stone); color: var(--gc-muted) } .gc-chip-btn:hover { border-color: var(--gc-brand) } .gc-chip-btn[aria-pressed="true"] { background: var(--gc-ink); border-color: var(--gc-ink); color: #FFFFFF } .gc-chip-btn[aria-pressed="true"] span { background: rgba(255, 255, 255, .18); color: #FFFFFF } .gc-parts-promise { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; padding: 16px 20px; margin-block: 0 28px; background: var(--wp--preset--color--mint); box-sizing: border-box; border-radius: 18px; font-weight: 700; font-size: 15px; color: var(--wp--preset--color--brand-dark) } .gc-parts-promise li { display: inline-flex; align-items: center; gap: 8px } .gc-parts-promise svg { width: 20px; height: 20px } .gc-parts { display: flex; flex-direction: column; gap: 36px } .gc-parts-group[hidden] { display: none } .gc-parts-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 22px !important; letter-spacing: -.02em } .gc-parts-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px } @media (max-width: 1180px) { .gc-parts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (max-width: 860px) { .gc-parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width: 520px) { .gc-parts-grid { grid-template-columns: 1fr } } .gc-part { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 22px; transition: border-color .25s, box-shadow .35s var(--gc-ease-out), transform .35s var(--gc-ease-out) } .gc-part:hover { border-color: #BFD8C8; box-shadow: 0 18px 40px -24px rgba(18, 38, 28, .35); transform: translateY(-3px) } .gc-part-icon { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--brand-dark) } .gc-part-icon svg { width: 22px; height: 22px } .gc-part-icon.is-enrichment { background: #FFF4CC; color: #8A6400 } .gc-part-icon.is-parts { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--sky-ink) } .gc-parts-title .gc-part-icon { width: 36px; height: 36px; border-radius: 12px } .gc-parts-title .gc-part-icon svg { width: 18px; height: 18px } .gc-part-text { display: flex; flex-direction: column; gap: 4px; flex: 1 } .gc-part-name { margin: 0; font-size: 17px !important; line-height: 1.3; letter-spacing: -.01em } .gc-part-name a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s } .gc-part-name a:hover { background-size: 100% 1.5px } .gc-part-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gc-muted) } .gc-part-buy { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--gc-line) } .gc-part-price { margin: 0; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; line-height: 1.1 } .gc-part-price small { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--gc-muted); margin-bottom: 2px } .gc-part-price strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--gc-ink) } .gc-part-price span { font-size: 13px; font-weight: 600; color: var(--gc-muted) } .gc-part-order { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--gc-ink); color: #FFFFFF !important; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color .2s, gap .25s } .gc-part-order svg { width: 16px; height: 16px; order: 2 } .gc-part-order:hover { background: var(--gc-brand); gap: 9px } @media (max-width: 520px) { .gc-part { flex-direction: row; flex-wrap: wrap; align-items: center } .gc-part-text { flex: 1 1 calc(100% - 60px) } .gc-part-buy { flex: 1 1 100% } } /* ---------- Korvia purifier price cards ---------- */ .gc-pp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px } @media (max-width: 1023px) { .gc-pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width: 640px) { .gc-pp-grid { grid-template-columns: 1fr } } .gc-pp { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 26px; overflow: hidden; transition: border-color .25s, box-shadow .35s var(--gc-ease-out), transform .35s var(--gc-ease-out) } .gc-pp:hover { border-color: #BFD8C8; box-shadow: 0 24px 48px -26px rgba(18, 38, 28, .35); transform: translateY(-4px) } .gc-pp-media { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 60%, #FFFFFF 0%, #EEF5F0 70%); display: grid; place-items: center; border-bottom: 1px solid var(--gc-line) } .gc-pp-media img { width: 70%; height: 86%; object-fit: contain; transition: transform .6s var(--gc-ease-out) } .gc-pp:hover .gc-pp-media img { transform: scale(1.04) } .gc-pp-save { position: absolute; top: 14px; left: 14px; font-size: 12px; font-weight: 800; letter-spacing: .03em; color: #FFFFFF; background: #C2410C; padding: 6px 10px; border-radius: 999px } .gc-pp-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 } .gc-pp-tag { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--brand-dark) } .gc-pp-name { margin: 0; font-size: 24px !important; letter-spacing: -.02em } .gc-pp-tech { margin: 0; font-size: 14px; color: var(--gc-muted) } .gc-pp-specs { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px } .gc-pp-specs li { font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--wp--preset--color--stone); color: var(--gc-ink) } .gc-pp-price { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--gc-line); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px } .gc-pp-price p { margin: 0; line-height: 1.1 } .gc-pp-price small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted); margin-bottom: 4px } .gc-pp-price strong { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--gc-ink) } .gc-pp-mrp { font-size: 14px; color: var(--gc-muted) } .gc-pp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .gc-pp-actions a { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 0 12px; border-radius: 14px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color .2s } .gc-pp-buy { background: var(--gc-ink); color: #FFFFFF !important } .gc-pp-buy:hover { background: var(--gc-brand) } .gc-pp-rent { background: var(--wp--preset--color--stone); color: var(--gc-ink) !important } .gc-pp-rent:hover { background: var(--wp--preset--color--mint) } .gc-pp-media img { mix-blend-mode: multiply } /* ---------- Home: Rent / Buy / Service doors ---------- */ .gc-doors-section { padding-block: 0 clamp(28px, 3vw, 40px) } .gc-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px } @media (max-width: 900px) { .gc-doors { grid-template-columns: 1fr } } .gc-door a { display: grid; grid-template-columns: minmax(0, 1fr) 132px; height: 100%; text-decoration: none; color: var(--gc-ink); background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 26px; overflow: hidden; transition: border-color .25s, box-shadow .35s var(--gc-ease-out), transform .35s var(--gc-ease-out) } .gc-door a:hover { border-color: var(--gc-brand); box-shadow: 0 24px 48px -26px rgba(18, 38, 28, .35); transform: translateY(-4px); color: var(--gc-ink) } .gc-door-media { order: 2; background: var(--wp--preset--color--mint); display: grid; place-items: end center; overflow: hidden } .gc-door.is-buy .gc-door-media { background: var(--wp--preset--color--sky) } .gc-door.is-service .gc-door-media { background: #FFF4CC } .gc-door-media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .6s var(--gc-ease-out) } .gc-door.is-buy .gc-door-media img, .gc-door.is-service .gc-door-media img { object-fit: contain; padding: 14px 6px; box-sizing: border-box } .gc-door a:hover .gc-door-media img { transform: scale(1.05) } .gc-door-body { padding: 22px; display: flex; flex-direction: column; gap: 6px } .gc-door-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--wp--preset--color--stone); color: var(--wp--preset--color--brand-dark); margin-bottom: 6px } .gc-door-icon svg { width: 20px; height: 20px } .gc-door-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1 } .gc-door-price { font-size: 15px; font-weight: 800; color: var(--wp--preset--color--brand-dark) } .gc-door-text { font-size: 15px; color: var(--gc-muted); line-height: 1.5 } .gc-door-cta { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px } .gc-door-cta svg { width: 16px; height: 16px; transition: transform .25s } .gc-door a:hover .gc-door-cta svg { transform: translateX(4px) } .gc-pp-name a { color: inherit; text-decoration: none } .gc-pp-name a:hover { color: var(--gc-brand) } a.gc-pp-media { text-decoration: none } /* ---------- Breadcrumbs ---------- */ .gc-crumbs-section { padding-top: 20px } .gc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--gc-muted) } .gc-crumbs li + li::before { content: "›"; margin-right: 6px; color: #9AA59F } .gc-crumbs a { color: var(--gc-muted); text-decoration: none } .gc-crumbs a:hover { color: var(--gc-brand); text-decoration: underline } .gc-crumbs [aria-current] { color: var(--gc-ink); font-weight: 600 } .gc-crumbs-section + .gc-page-hero { padding-top: 12px } /* ---------- Model comparison ---------- */ .gc-compare-models table { min-width: 720px } .gc-compare-models thead th { background: #FFFFFF; vertical-align: bottom; text-align: center; font-size: 17px } .gc-compare-models thead th img { display: block; width: 96px; height: 110px; object-fit: contain; margin: 0 auto 8px; mix-blend-mode: multiply } .gc-compare-models thead th a { color: var(--gc-ink); text-decoration: none } .gc-compare-models thead th a:hover { color: var(--gc-brand) } .gc-compare-models td:not(:first-child) { text-align: center } .gc-compare-models td:first-child { width: 22% } .gc-compare-models td strong { font-size: 20px } .gc-compare-models td s { display: block; color: var(--gc-muted); font-size: 13px } .gc-compare-btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 12px; background: var(--wp--preset--color--stone); color: var(--gc-ink) !important; font-weight: 700; font-size: 14px; text-decoration: none } .gc-compare-btn:hover { background: var(--wp--preset--color--mint) } .gc-uvuf { margin-top: 20px !important } /* ---------- Mini part cards (model pages, filter pages) ---------- */ .gc-minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px } @media (max-width: 1023px) { .gc-minis { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width: 600px) { .gc-minis { grid-template-columns: 1fr } } .gc-mini { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 18px } .gc-mini-text { display: flex; flex-direction: column; flex: 1; min-width: 0 } .gc-mini-text strong { font-size: 16px } .gc-mini-text strong a { color: inherit; text-decoration: none } .gc-mini-text strong a:hover { color: var(--gc-brand) } .gc-mini-text small { font-size: 13px; color: var(--gc-muted) } .gc-mini-price { text-align: right; font-weight: 800; font-size: 18px; line-height: 1.1 } .gc-mini-price small { display: block; font-size: 11px; font-weight: 700; color: var(--gc-muted) } /* ---------- Other models ---------- */ .gc-others { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px } @media (max-width: 760px) { .gc-others { grid-template-columns: 1fr } } .gc-other { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 20px; color: var(--gc-ink); text-decoration: none; transition: border-color .25s, transform .3s var(--gc-ease-out) } .gc-other:hover { border-color: var(--gc-brand); transform: translateY(-2px); color: var(--gc-ink) } .gc-other img { width: 64px; height: 76px; object-fit: contain; mix-blend-mode: multiply } .gc-other span:not(.gc-other-price) { display: flex; flex-direction: column; flex: 1 } .gc-other strong { font-size: 18px } .gc-other small { color: var(--gc-muted); font-size: 13px } .gc-other-price { font-weight: 800; font-size: 20px } /* ---------- Filter page: fits + price box ---------- */ .gc-fits-box { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px 28px; padding: 20px 24px; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 24px; box-sizing: border-box } @media (max-width: 860px) { .gc-fits-box { grid-template-columns: 1fr } } .gc-fits-label { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted) } .gc-fits { display: flex; flex-wrap: wrap; gap: 8px } .gc-fit { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--gc-line); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--gc-ink); text-decoration: none; background: var(--wp--preset--color--cream) } .gc-fit:hover { border-color: var(--gc-brand); color: var(--gc-ink) } .gc-fit img { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #FFFFFF; mix-blend-mode: multiply } .gc-fits-note { margin: 0; font-weight: 600 } .gc-fits-price { line-height: 1.1 } .gc-fits-price small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--gc-muted) } .gc-fits-price strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em } .gc-fits-price span { font-size: 14px; color: var(--gc-muted); margin-left: 4px } .gc-fits-actions { display: flex; flex-wrap: wrap; gap: 8px } .gc-fits-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 14px; font-weight: 700; font-size: 14px; text-decoration: none } /* ---------- Filters & Service hub ---------- */ .gc-jumps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px } @media (max-width: 860px) { .gc-jumps { grid-template-columns: 1fr } } .gc-jump { display: flex; align-items: center; gap: 14px; height: 100%; box-sizing: border-box; padding: 18px 20px; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 22px; color: var(--gc-ink); text-decoration: none; transition: border-color .25s, transform .3s var(--gc-ease-out) } .gc-jump:hover { border-color: var(--gc-brand); transform: translateY(-2px); color: var(--gc-ink) } .gc-jump > span:nth-child(2) { display: flex; flex-direction: column; flex: 1 } .gc-jump strong { font-size: 18px } .gc-jump small { font-size: 14px; color: var(--gc-muted) } .gc-jump > svg { width: 20px; height: 20px; color: var(--gc-muted) } .gc-service-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px } .gc-service-steps li { counter-increment: s; position: relative; padding-left: 52px; display: flex; flex-direction: column; gap: 2px } .gc-service-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--wp--preset--color--sun); color: var(--gc-ink) } .gc-service-steps strong { font-size: 17px } .gc-service-steps span { color: var(--gc-muted); font-size: 15px; line-height: 1.55 } .gc-contact-grid .gc-info-row { background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 20px; padding: 14px 16px !important; box-sizing: border-box } .gc-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px } @media (max-width: 1023px) { .gc-guides { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width: 600px) { .gc-guides { grid-template-columns: 1fr } } .gc-guide { display: grid; grid-template-columns: 110px minmax(0, 1fr); height: 100%; background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 22px; overflow: hidden; color: var(--gc-ink); text-decoration: none; transition: border-color .25s, transform .3s var(--gc-ease-out) } .gc-guide:hover { border-color: var(--gc-brand); transform: translateY(-3px); color: var(--gc-ink) } .gc-guide-img { background: var(--wp--preset--color--stone) } .gc-guide-img img { width: 100%; height: 100%; object-fit: cover; display: block } .gc-guide-body { padding: 16px; display: flex; flex-direction: column; gap: 4px } .gc-guide-body strong { font-size: 18px } .gc-guide-body small { font-size: 14px; color: var(--gc-muted) } .gc-guide-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700 } .gc-guide-foot span:last-child { color: var(--wp--preset--color--brand-dark) } .gc-faq-jump-section { padding-bottom: clamp(28px, 3vw, 40px) } .gc-faq-jump .gc-chip-btn { text-decoration: none } .gc-faq-group-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(24px, 2.6vw, 32px) !important; align-self: start } @media (min-width: 900px) { .wp-block-group.gc-cols-2 > .gc-faq-group-title { grid-column: 1; } } /* Dropdown items: label with a short description underneath */ .gc-nav .wp-block-navigation__submenu-container { min-width: 280px !important } .gc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px !important } .gc-nav .wp-block-navigation-item__label { font-weight: 700 } .gc-nav .wp-block-navigation-item__description { display: block; font-size: 13px; font-weight: 500; color: var(--gc-muted); line-height: 1.35 } .gc-nav .is-menu-open .wp-block-navigation-item__description { font-size: 14px } /* ---------- Header actions: quiet account link + slim CTA ---------- */ .gc-header-actions { gap: 6px !important; align-items: center } .gc-header-actions .wp-block-button__link:hover { transform: none; box-shadow: none } .gc-account-link .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; background: transparent !important; color: var(--gc-ink) !important; padding: 0 14px !important; min-height: 40px; border-radius: 999px !important; font-weight: 600 !important; transition: background-color .2s, color .2s } .gc-account-link .wp-block-button__link::before { content: ""; width: 20px; height: 20px; flex: none; 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%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 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%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat } .gc-account-link .wp-block-button__link:hover { background: var(--wp--preset--color--stone) !important; color: var(--wp--preset--color--brand-dark) !important } .gc-header-cta .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 20px !important; background: var(--gc-ink) !important; color: #FFFFFF !important; font-weight: 700 !important; letter-spacing: -.005em; transition: background-color .2s, gap .25s var(--gc-ease-out) } .gc-header-cta .wp-block-button__link::after { content: ""; width: 16px; height: 16px; flex: none; 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--gc-ease-out) } .gc-header-cta .wp-block-button__link:hover { background: var(--gc-brand) !important } .gc-header-cta .wp-block-button__link:hover::after { transform: translateX(3px) } .gc-header.is-condensed .gc-header-cta .wp-block-button__link, .gc-header.is-condensed .gc-account-link .wp-block-button__link { min-height: 36px } @media (max-width: 781px) { .gc-header-cta .wp-block-button__link { padding: 0 14px 0 16px !important; font-size: 14px !important; min-height: 38px } } /* ---------- Header layout: logo + menu on the left, actions grouped on the right ---------- */ @media (min-width: 1024px) { .gc-navbar-inner { gap: 0 !important } .gc-navbar-inner .gc-nav { flex: 1 1 auto; margin-left: clamp(28px, 3.5vw, 56px) } .gc-nav .wp-block-navigation__container { justify-content: flex-start !important; gap: clamp(20px, 2.2vw, 32px) !important } } .gc-header-actions { gap: 0 !important } .gc-header-actions .gc-account-link { display: flex; align-items: center } .gc-header-actions .gc-account-link::after { content: ""; width: 1px; height: 24px; background: var(--gc-line); margin: 0 14px 0 6px } /* ------------------------------------------------------------------ Buy Korvia mega menu: Water purifiers | Filters & spare parts ------------------------------------------------------------------ */ .gc-nav .gc-mega-col > .wp-block-navigation-item__content .wp-block-navigation-item__label { font-weight: 800 } @media (min-width: 1024px) { .gc-nav .gc-mega > .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: 290px 330px; gap: 0 16px; padding: 18px !important; border-radius: 24px; transform: translateY(10px); transition: opacity .2s ease, transform .3s var(--gc-ease), visibility .2s } .gc-nav .gc-mega:hover > .wp-block-navigation__submenu-container, .gc-nav .gc-mega:focus-within > .wp-block-navigation__submenu-container { transform: none } .gc-nav .gc-mega .gc-mega-col { display: flex !important; flex-direction: column; align-items: stretch !important; position: static } .gc-nav .gc-mega .gc-mega-col > .wp-block-navigation-item__content { padding: 2px 14px 10px !important; background: none !important; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted) } .gc-nav .gc-mega .gc-mega-col > .wp-block-navigation-item__content:hover { color: var(--gc-brand) } .gc-nav .gc-mega .gc-mega-col > .wp-block-navigation__submenu-icon { display: none !important } .gc-nav .gc-mega .gc-mega-col > .wp-block-navigation__submenu-container { position: static !important; visibility: inherit !important; opacity: 1 !important; width: auto !important; height: auto !important; min-width: 0 !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; transform: none !important; left: auto !important; top: auto !important } .gc-nav .gc-mega .gc-mega-col + .gc-mega-col { background: var(--wp--preset--color--stone); border-radius: 18px; padding: 14px 6px 8px } .gc-nav .gc-mega .gc-mega-col + .gc-mega-col > .wp-block-navigation-item__content { padding-top: 0 !important } .gc-nav .gc-mega .gc-mega-col + .gc-mega-col .wp-block-navigation-item__content:hover { background: #FFFFFF } } .gc-nav .gc-mega-more > .wp-block-navigation-item__content { color: var(--gc-brand) !important } .gc-nav .gc-mega-more .wp-block-navigation-item__label::after { content: " →" } .gc-nav .gc-mega-col:has(.gc-mega-guide) > .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 4px } .gc-nav .gc-mega-col:has(.gc-mega-guide) > .wp-block-navigation__submenu-container > :not(.gc-mega-guide) { grid-column: 1 / -1 } .gc-nav .gc-mega-guide { position: relative } .gc-nav .gc-mega-guide > .wp-block-navigation-item__content { padding: 7px 12px !important; font-size: 14px } .gc-nav .gc-mega-guide .wp-block-navigation-item__label { font-weight: 600 } .gc-nav .gc-mega-guide-first, .gc-nav .gc-mega-guide-first + .gc-mega-guide { margin-top: 30px } .gc-nav .gc-mega-guide-first::before { content: "Filter guides"; position: absolute; left: 12px; top: -22px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted); white-space: nowrap } .gc-nav .is-menu-open .gc-mega-col > .wp-block-navigation-item__content { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted); padding-top: 10px !important } .gc-nav .is-menu-open .gc-mega-col { border: 0 !important } .gc-nav .is-menu-open .gc-mega-guide { font-size: 15px !important } /* ------------------------------------------------------------------ Filters page: model finder + toolbar ------------------------------------------------------------------ */ .gc-finder { background: #FFFFFF; border: 1px solid var(--gc-line); border-radius: 24px; padding: clamp(18px, 2.5vw, 26px); box-sizing: border-box; box-shadow: 0 1px 2px rgba(18, 38, 28, .04), 0 12px 28px -18px rgba(18, 38, 28, .2); scroll-margin-top: 110px } .gc-finder-label { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; margin: 0 0 14px } .gc-finder-label > span:first-child { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--sun); font-size: 14px } .gc-finder-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px } @media (max-width: 1100px) { .gc-finder-opts { grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (max-width: 640px) { .gc-finder-opts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none } .gc-finder-opts::-webkit-scrollbar { display: none } .gc-finder-opt { flex: 0 0 168px; scroll-snap-align: start } } .gc-finder-opt { font: inherit; color: var(--gc-ink); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; border: 1.5px solid var(--gc-line); background: #FFFFFF; cursor: pointer; text-align: left; min-width: 0; transition: border-color .2s, background-color .2s, box-shadow .2s, transform .25s var(--gc-ease) } .gc-finder-opt:hover { border-color: #BFD9C6; transform: translateY(-2px) } .gc-finder-opt:focus-visible { outline: 3px solid var(--wp--preset--color--sky-ink); outline-offset: 2px } .gc-finder-opt[aria-pressed="true"] { border-color: var(--gc-brand); background: #F4FAF6; box-shadow: 0 0 0 3px rgba(18, 122, 70, .12) } .gc-finder-img { width: 44px; height: 52px; flex: none; border-radius: 12px; background: var(--wp--preset--color--stone); display: grid; place-items: center; color: var(--wp--preset--color--brand-dark) } .gc-finder-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 3px; box-sizing: border-box } .gc-finder-img svg { width: 22px; height: 22px } .gc-finder-opt[aria-pressed="true"] .gc-finder-img.is-icon { background: var(--wp--preset--color--mint) } .gc-finder-text { display: flex; flex-direction: column; min-width: 0 } .gc-finder-text strong { font-size: 15px; line-height: 1.25 } .gc-finder-text small { font-size: 12.5px; color: var(--gc-muted) } .gc-finder-note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--wp--preset--color--mint); animation: gcFinderIn .35s var(--gc-ease) } .gc-finder-note[hidden] { display: none } .gc-finder-note p { flex: 1 1 260px; margin: 0; font-size: 15px } .gc-part-order.is-wide { padding: 0 18px } .gc-parts-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 24px 0 18px } .gc-parts-toolbar .gc-finder-label { margin: 0 } .gc-part[hidden] { display: none !important } .gc-part.is-in { animation: gcFinderIn .4s var(--gc-ease) both } @keyframes gcFinderIn { from { opacity: 0; transform: translateY(10px) } } .gc-parts-empty { padding: 24px; text-align: center; color: var(--gc-muted); border: 1.5px dashed var(--gc-line); border-radius: 18px } .gc-parts-empty[hidden] { display: none } /* Order steps, cross-links */ .gc-order-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: o } .gc-order-steps li { counter-increment: o; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--gc-line) } .gc-order-steps li::after { content: "0" counter(o); position: absolute; top: 18px; right: 22px; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--gc-line) } .gc-order-steps .gc-part-icon { margin-bottom: 8px } .gc-order-steps strong { font-size: 18px } .gc-order-steps span:not(.gc-part-icon) { color: var(--gc-muted); font-size: 15px; line-height: 1.55 } @media (max-width: 860px) { .gc-order-steps { grid-template-columns: 1fr } } .gc-cross-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px } @media (max-width: 860px) { .gc-cross-list { grid-template-columns: 1fr } } .gc-cross { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 20px 22px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--gc-line); height: 100%; box-sizing: border-box } .gc-cross > div { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px } .gc-cross strong { font-size: 17px } .gc-cross > div > span { color: var(--gc-muted); font-size: 15px } .gc-cross > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color .2s } /* ------------------------------------------------------------------ Service page ------------------------------------------------------------------ */ .gc-svcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px } @media (max-width: 1023px) { .gc-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width: 560px) { .gc-svcs { grid-template-columns: 1fr } } .gc-svc { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--gc-line); color: inherit; text-decoration: none; transition: transform .3s var(--gc-ease), box-shadow .3s, border-color .3s } .gc-svc:hover { transform: translateY(-4px); border-color: #CFE3D5; box-shadow: 0 22px 40px -24px rgba(18, 38, 28, .35) } .gc-svc-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 10px; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--brand-dark); transition: transform .4s var(--gc-spring) } .gc-svc-icon svg { width: 26px; height: 26px } .gc-svc:hover .gc-svc-icon { transform: rotate(-8deg) scale(1.08) } .gc-svc strong { font-size: 19px; letter-spacing: -.01em } .gc-svc > span:not(.gc-svc-icon):not(.gc-svc-go) { color: var(--gc-muted); font-size: 15px; line-height: 1.55 } .gc-svc-go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--wp--preset--color--brand-dark); transition: gap .2s } .gc-svc-go svg { width: 16px; height: 16px } .gc-svc:hover .gc-svc-go { gap: 10px } .gc-costs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px } @media (max-width: 860px) { .gc-costs { grid-template-columns: 1fr } } .gc-costs li { display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: 24px; background: var(--wp--preset--color--cream); border: 1px solid var(--gc-line) } .gc-costs li > span:last-child { color: var(--gc-muted); font-size: 15px; line-height: 1.55 } .gc-costs strong { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15 } .gc-costs-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted) } .gc-costs li.is-featured { background: var(--wp--preset--color--forest); border-color: transparent; color: #FFFFFF } .gc-costs li.is-featured .gc-costs-tag { color: var(--wp--preset--color--sun) } .gc-costs li.is-featured > span:last-child { color: rgba(255, 255, 255, .78) } .gc-signs-row { align-items: center } .gc-signs { display: flex; flex-wrap: wrap; gap: 10px } .gc-sign { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: #FFFFFF; border: 1.5px solid var(--gc-line); font-weight: 700; font-size: 15px; color: var(--gc-ink) !important; text-decoration: none; transition: border-color .2s, background-color .2s, transform .25s var(--gc-ease) } .gc-sign::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E0A100; flex: none; transition: background-color .2s } .gc-sign:hover { border-color: var(--gc-brand); transform: translateY(-2px) } .gc-sign.is-picked { background: var(--wp--preset--color--mint); border-color: var(--gc-brand) } .gc-sign.is-picked::before { background: var(--gc-brand) } @media (prefers-reduced-motion: reduce) { .gc-svc, .gc-svc-icon, .gc-sign, .gc-finder-opt, .gc-nav .gc-mega > .wp-block-navigation__submenu-container { transition: none !important; transform: none !important } .gc-part.is-in, .gc-finder-note { animation: none } } @media (max-width: 640px) { .gc-parts-toolbar .gc-parts-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px } .gc-parts-toolbar .gc-parts-filter::-webkit-scrollbar { display: none } .gc-parts-toolbar .gc-chip-btn { flex: none } } /* ------------------------------------------------------------------ Page transitions (cross-document View Transitions; see inc/transitions.php) The header, WhatsApp button and phone bar hold still; the page body fades and rises; a product photo glides into its detail page; the menu underline slides. ------------------------------------------------------------------ */ /* The opt-in rule (@view-transition) is printed inline in by inc/transitions.php. */ .gc-header { view-transition-name: gc-header } #wpadminbar { view-transition-name: gc-adminbar } .gc-wa { view-transition-name: gc-wa } .gc-mobile-bar { view-transition-name: gc-mobile-bar } .gc-nav-ind { position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gc-brand); pointer-events: none; view-transition-name: gc-nav-ind } .gc-nav .has-ind::after { display: none } .gc-nav .is-menu-open .gc-nav-ind, .gc-nav .wp-block-navigation__submenu-container .gc-nav-ind { display: none } /* Fade-through: the old page is gone before the new one rises in, so text never double-exposes. */ ::view-transition-old(root) { animation: gcPageOut .1s cubic-bezier(.4, 0, 1, 1) both } ::view-transition-new(root) { animation: gcPageIn .34s cubic-bezier(.16, 1, .3, 1) .1s both } @keyframes gcPageOut { to { opacity: 0 } } @keyframes gcPageIn { from { opacity: 0; transform: translateY(12px) scale(.995) } } /* The moment a link is clicked: the page dims and a loading line runs under the menu, so there's an instant response even while the next page is still on its way. */ @media (prefers-reduced-motion: no-preference) { .gc-main, .gc-footer { transition: opacity .22s ease } .gc-leaving .gc-main, .gc-leaving .gc-footer { opacity: .4 } .gc-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--gc-brand), #3FBF7F); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none } .gc-leaving .gc-header::after { opacity: 1; animation: gcLoading 2.4s cubic-bezier(.1, .7, .3, 1) both } } @keyframes gcLoading { 0% { transform: scaleX(0) } 30% { transform: scaleX(.55) } 100% { transform: scaleX(.92) } } /* Arriving through a transition: the transition brings the page in, so the page's own intro animations (hero copy, hero photo, price chip) are skipped instead of playing after it. */ .gc-vt-in .gc-hero-copy > *, .gc-vt-in .gc-hero h1 .gc-line, .gc-vt-in .gc-price-chip, .gc-vt-in .gc-hero-media .wp-block-image img, .gc-vt-in .gc-wa-btn { animation: none !important } .gc-vt-in .gc-float-1 { animation: gc-bob 5s ease-in-out infinite !important } .gc-vt-in .gc-float-2 { animation: gc-bob 6s ease-in-out infinite !important } /* Fixed parts: no cross-fade wobble, just settle into the new state. */ ::view-transition-group(gc-header), ::view-transition-group(gc-adminbar), ::view-transition-group(gc-wa), ::view-transition-group(gc-mobile-bar) { animation-duration: .35s; animation-timing-function: var(--gc-ease-out) } ::view-transition-old(gc-header), ::view-transition-new(gc-header) { animation-duration: .25s } /* The travelling photo. */ ::view-transition-group(gc-photo) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); z-index: 2 } ::view-transition-old(gc-photo), ::view-transition-new(gc-photo) { height: 100%; width: 100%; object-fit: cover; overflow: clip; animation-duration: .4s } ::view-transition-old(gc-photo) { animation: gcPageOut .25s ease-in both } ::view-transition-new(gc-photo) { animation: gcPhotoIn .35s ease-out .1s both } @keyframes gcPhotoIn { from { opacity: 0 } } /* The menu underline slides between items. */ ::view-transition-group(gc-nav-ind) { animation-duration: .45s; animation-timing-function: cubic-bezier(.22, 1, .36, 1) } /* Header account button when logged in: initial badge + first name. */ .gc-account-link.is-signed-in .wp-block-button__link { padding-left: 5px !important } .gc-account-link.is-signed-in .wp-block-button__link::before { display: none } .gc-account-initial { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--sun); color: var(--gc-ink); font-size: 13px; font-weight: 800; line-height: 1 } .gc-account-name { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } /* ------------------------------------------------------------------ Login / sign-up page (templates/page-auth.html, patterns/page-login.php) Split layout: animated brand panel + the login card (card styles: plugin account.css) ------------------------------------------------------------------ */ .gc-auth-main { background: var(--wp--preset--color--cream) } .gc-auth-section { padding: clamp(12px, 2vw, 24px) max(16px, env(safe-area-inset-right, 0px)) clamp(24px, 4vw, 48px) max(16px, env(safe-area-inset-left, 0px)) !important } .gc-auth-section > .gc-auth { max-width: 1320px !important } .gc-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: stretch; min-height: calc(100svh - var(--gc-header-h, 120px) - 48px) } .gc-auth-panel { display: grid; place-items: center; padding: clamp(8px, 2vw, 24px) 0 } .gc-auth-brand { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: radial-gradient(120% 90% at 100% 0%, rgba(30, 155, 87, .45), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(17, 97, 143, .4), transparent 60%), var(--wp--preset--color--forest); color: #FFFFFF } .gc-auth-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent) } .gc-auth-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--sun) } .gc-auth-title { margin: 0; color: #FFFFFF; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; max-width: 14ch } .gc-auth-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px } .gc-auth-points li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .88) } .gc-auth-points li span { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14) } .gc-auth-points svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round } /* The "app preview": a Korvia with live-looking cards floating around it, and water ripples behind. */ .gc-auth-visual { position: relative; min-height: 300px; display: grid; place-items: center } .gc-auth-product { display: grid; place-items: center; width: min(46%, 230px); aspect-ratio: 4 / 5; padding: 18px; border-radius: 28px; background: #FFFFFF; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .6), 0 0 0 8px rgba(255, 255, 255, .06); animation: gcAuthRise .8s var(--gc-ease-out) .3s both, gcAuthFloat 7s ease-in-out 1.1s infinite } .gc-auth-product img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply } .gc-auth-ripples { position: absolute; z-index: -1; left: 50%; bottom: 8%; width: 0; height: 0; pointer-events: none } .gc-auth-ripples i { position: absolute; left: -160px; top: -60px; width: 320px; height: 120px; border-radius: 50%; border: 1.5px solid rgba(127, 224, 166, .35); animation: gcAuthRipple 6s ease-out infinite; opacity: 0 } .gc-auth-ripples i:nth-child(2) { animation-delay: 2s } .gc-auth-ripples i:nth-child(3) { animation-delay: 4s } .gc-auth-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .94); color: var(--gc-ink); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); backdrop-filter: blur(8px); font-size: 13px; line-height: 1.3; white-space: nowrap } .gc-auth-chip b { display: block; font-size: 13px } .gc-auth-chip small { display: block; color: var(--gc-muted); font-size: 12px } .gc-auth-chip-ico { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--wp--preset--color--sun); color: var(--gc-ink) } .gc-auth-chip-ico.is-ok { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--brand-dark) } .gc-auth-chip-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round } .gc-auth-chip.is-pay { left: 2%; top: 10%; animation: gcAuthChipIn .8s var(--gc-ease-out) .5s both, gcAuthFloat 6s ease-in-out 1.3s infinite } .gc-auth-chip.is-filter { right: 0; top: 38%; min-width: 190px; animation: gcAuthChipIn .8s var(--gc-ease-out) .75s both, gcAuthFloat 7s ease-in-out 1.6s infinite reverse } .gc-auth-chip.is-visit { left: 6%; bottom: 4%; animation: gcAuthChipIn .8s var(--gc-ease-out) 1s both, gcAuthFloat 6.5s ease-in-out 1.8s infinite } .gc-auth-meter { display: block; margin-top: 6px; height: 6px; border-radius: 6px; background: var(--wp--preset--color--stone); overflow: hidden } .gc-auth-meter i { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, #1E9B57, #4CC383); animation: gcAuthMeter 1.4s var(--gc-ease-out) 1.2s both } .gc-auth-brand-copy > * { animation: gcAuthRise .7s var(--gc-ease-out) both } .gc-auth-brand-copy > :nth-child(2) { animation-delay: .08s } .gc-auth-brand-copy > :nth-child(3) { animation-delay: .16s } @keyframes gcAuthRise { from { opacity: 0; transform: translateY(16px) } } @keyframes gcAuthChipIn { from { opacity: 0; transform: translateY(14px) scale(.94) } } @keyframes gcAuthFloat { 50% { transform: translateY(-10px) } } @keyframes gcAuthRipple { 0% { opacity: 0; transform: scale(.35) } 20% { opacity: 1 } 100% { opacity: 0; transform: scale(1.6) } } @keyframes gcAuthMeter { from { width: 0 } } @media (max-width: 960px) { .gc-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 16px } .gc-auth-brand { border-radius: 24px; padding: 22px 22px 24px; gap: 0 } .gc-auth-visual, .gc-auth-points, .gc-auth-ripples { display: none } .gc-auth-title { font-size: clamp(24px, 6vw, 32px); max-width: none } .gc-auth-eyebrow { margin-bottom: 8px } .gc-auth-panel { padding: 0 0 72px } } @media (prefers-reduced-motion: reduce) { .gc-auth-product, .gc-auth-chip, .gc-auth-ripples i, .gc-auth-meter i, .gc-auth-brand-copy > * { animation: none !important } .gc-auth-ripples i { opacity: .5 } }