/* ========================================================================== Point Print — CMS template stylesheet ========================================================================== */ :root { --color-primary: #C72C33; --color-primary-dark: #a32228; --color-dark: #1f1f1f; --color-dark-alt: #171717; --color-light: #f9f9f9; --color-white: #ffffff; --color-gray: #e5e5e5; --color-text: #4a4a4a; --color-text-dark: #222222; --color-text-light: #888888; --font-main: 'Inter', sans-serif; --container-width: 1300px; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --shadow-sm: 0 4px 6px rgba(0,0,0,0.05); --shadow-md: 0 10px 30px rgba(0,0,0,0.08); --shadow-lg: 0 20px 40px rgba(0,0,0,0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-main); color: var(--color-text); line-height: 1.6; background-color: var(--color-white); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; } #main-content { flex: 1 0 auto; display: flex; flex-direction: column; } /* The CMS wraps every rendered block in
. Neutralise its own spacing so our per-section padding is the only padding applied, and let the fixed navbar's wrapper get out of the way on the public site. */ .cms-block { padding: 0; } body:not(.cms-edit-mode) .cms-block--navbar { display: contents; } h1, h2, h3, h4, h5, h6 { color: var(--color-text-dark); font-weight: 700; line-height: 1.2; } a { color: var(--color-primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--color-primary-dark); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } [data-lucide] { width: 20px; height: 20px; } .pp-wrap { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; } .pp-hl { color: var(--color-primary); } /* Scroll-reveal — only hides content when html.js is set (synchronous inline script in layout.php ), so JS-disabled visitors always see full content immediately. */ html.js [data-reveal]:not(.pp-visible) { opacity: 0; transform: translateY(28px); } [data-reveal] { transition: opacity .7s ease, transform .7s ease; } [data-reveal].pp-visible { opacity: 1; transform: none; } /* ========================================================================== Buttons ========================================================================== */ .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 28px; font-size: 0.9rem; font-weight: 600; border-radius: 4px; cursor: pointer; transition: var(--transition); border: none; text-transform: uppercase; letter-spacing: 0.5px; } .pp-btn--dark { background: var(--color-dark); color: var(--color-white); } .pp-btn--dark:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-md); } .pp-btn--white { background: var(--color-white); color: var(--color-dark); } .pp-btn--white:hover { background: var(--color-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .pp-btn--outline { background: transparent; color: var(--color-dark); border: 1px solid var(--color-gray); } .pp-btn--outline:hover { border-color: var(--color-dark); background: var(--color-light); } .pp-btn--glow { background: var(--color-primary); color: var(--color-white); padding: 16px 35px; font-size: 1.05rem; border-radius: 8px; text-transform: none; letter-spacing: normal; } .pp-btn--glow:hover { background: var(--color-primary-dark); color: var(--color-white); transform: translateY(-3px); } .pp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } /* ========================================================================== Navbar (global) ========================================================================== */ .pp-navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 15px 0; background: var(--color-white); box-shadow: var(--shadow-sm); transition: var(--transition); } .pp-navbar.pp-scrolled { padding: 10px 0; box-shadow: var(--shadow-md); } .pp-navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .pp-navbar__logo { display: inline-flex; align-items: center; } .pp-navbar__logo img { max-height: 34px; width: auto; } .pp-navbar__logo-text { font-weight: 800; font-size: 1.4rem; letter-spacing: -0.5px; color: var(--color-text-dark); } .pp-nav { display: flex; gap: 30px; } .pp-nav a { color: var(--color-text-dark); font-size: 0.95rem; font-weight: 500; position: relative; } .pp-nav a:hover, .pp-nav a.pp-active { color: var(--color-primary); } .pp-nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--color-primary); transition: var(--transition); } .pp-nav a:hover::after, .pp-nav a.pp-active::after { width: 100%; } .pp-nav-cta-mobile { display: none; } .pp-navbar__actions { display: flex; align-items: center; gap: 22px; } .pp-menu-toggle { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 20px; position: relative; } .pp-menu-toggle span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-text-dark); border-radius: 2px; transition: var(--transition); } .pp-menu-toggle span:nth-child(1) { top: 0; } .pp-menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); } .pp-menu-toggle span:nth-child(3) { bottom: 0; } .pp-menu-toggle.pp-active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .pp-menu-toggle.pp-active span:nth-child(2) { opacity: 0; } .pp-menu-toggle.pp-active span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); } /* ========================================================================== Hero — real work photo + grayscale overlay photo (two layers, matching source demo). Both images are block fields (bg_image/overlay_image) set inline by render.php so editors can swap them — only layout/effect properties live here, never a hardcoded url(). ========================================================================== */ .pp-hero { position: relative; min-height: 78vh; display: flex; align-items: center; background-color: var(--color-dark); overflow: hidden; padding: 140px 0 80px; } /* .pp-wrap's own margin:0 auto absorbs the flex row's extra space and centers it as a flex item — pin it to full width so the hero content sits left, matching every other section. */ .pp-hero .pp-wrap { width: 100%; } .pp-hero__photo { position: absolute; inset: 0; background-size: cover; background-position: center right; z-index: 0; } .pp-hero__texture { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.45; filter: grayscale(100%) contrast(0.8); -webkit-mask-image: linear-gradient(105deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 80%); mask-image: linear-gradient(105deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 80%); pointer-events: none; z-index: 1; } .pp-hero__content { position: relative; z-index: 10; max-width: 700px; } .pp-hero__meta { display: inline-block; color: #ccc; font-size: 0.8rem; font-weight: 600; letter-spacing: 2px; margin-bottom: 20px; text-transform: uppercase; border-left: 2px solid var(--color-primary); padding-left: 15px; } .pp-hero__title { color: var(--color-white); font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.1; margin-bottom: 25px; letter-spacing: -1px; } .pp-hero__sub { color: #cccccc; font-size: 1.2rem; line-height: 1.6; margin-bottom: 40px; max-width: 520px; } .pp-hero__buttons { display: flex; gap: 20px; flex-wrap: wrap; } /* ========================================================================== Service rows ========================================================================== */ .pp-service-row { padding: 100px 0 0; background: var(--color-white); } .pp-service-row--alt { background: var(--color-light); } .pp-service-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .pp-service-row--reverse .pp-service-row__grid { grid-template-columns: 1.2fr 0.8fr; } .pp-service-row--reverse .pp-service-row__grid > :first-child { order: 2; } .pp-service-row__content { padding-bottom: 60px; } .pp-service-row__title { font-size: 2.6rem; margin-bottom: 22px; } .pp-service-row__desc { font-size: 1.1rem; color: var(--color-text); margin-bottom: 30px; } .pp-service-row__list { margin-bottom: 36px; } .pp-service-row__list li { margin-bottom: 14px; font-size: 1.05rem; font-weight: 500; display: flex; align-items: center; gap: 14px; } .pp-service-row__list [data-lucide] { color: var(--color-text-light); width: 16px; height: 16px; flex-shrink: 0; } .pp-service-row__media { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; } .pp-service-row__media img { border-radius: 4px; box-shadow: var(--shadow-lg); position: absolute; max-width: 68%; transition: transform 0.5s ease; } .pp-service-row__media .pp-img-main { z-index: 2; transform: rotate(5deg); } .pp-service-row__media .pp-img-secondary { z-index: 1; transform: rotate(-8deg) translate(-40px, 20px); opacity: .85; } .pp-service-row__media:hover .pp-img-main { transform: rotate(2deg) scale(1.04); } .pp-service-row__media:hover .pp-img-secondary { transform: rotate(-10deg) translate(-50px, 10px); } .pp-service-row__media--single img { position: static; max-width: 88%; margin: 0 auto; transform: none !important; } .pp-service-row__target { border-top: 1px solid var(--color-gray); padding: 40px 0; margin-top: 40px; text-align: center; } .pp-service-row__target-title { font-size: 1.15rem; color: var(--color-primary); margin-bottom: 12px; } .pp-service-row__target-desc { max-width: 800px; margin: 0 auto; color: var(--color-text-light); font-size: 0.95rem; } /* ========================================================================== About / stats ========================================================================== */ .pp-about { background: #0d0d0d; color: var(--color-white); padding: 120px 0; position: relative; overflow: hidden; } .pp-about__orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; } .pp-about__orb--red { background: rgba(199, 44, 51, 0.18); width: 600px; height: 600px; top: -100px; right: -100px; } .pp-about__orb--dark { background: rgba(30, 30, 30, 0.8); width: 800px; height: 800px; bottom: -200px; left: -200px; } .pp-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; background: rgba(25, 25, 25, 0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 60px; } .pp-about__badge { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; color: var(--color-primary); text-transform: uppercase; margin-bottom: 18px; } .pp-about__title { color: var(--color-white); font-size: 2.6rem; margin-bottom: 22px; } .pp-about__desc { color: #a0a0a0; font-size: 1.1rem; line-height: 1.7; margin-bottom: 18px; } .pp-about__stats { display: flex; gap: 40px; margin-top: 26px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 26px; } .pp-stat__number { display: block; font-size: 2.6rem; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 6px; } .pp-stat__label { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .pp-about__image { position: relative; border-radius: 8px; overflow: hidden; } .pp-about__image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.8s ease; aspect-ratio: 4/5; } .pp-about__grid:hover .pp-about__image img { transform: scale(1.04); } /* ========================================================================== Text band (local SEO copy) ========================================================================== */ .pp-text-band { padding: 80px 0; } .pp-text-band__inner { max-width: 780px; margin: 0 auto; text-align: center; } .pp-text-band__title { font-size: 1.8rem; margin-bottom: 20px; } .pp-text-band__body { color: var(--color-text); line-height: 1.8; font-size: 1.05rem; } .pp-text-band__body p + p { margin-top: 18px; } /* ========================================================================== CTA band ========================================================================== */ .pp-cta { padding: 110px 0; background: var(--color-white); text-align: center; position: relative; overflow: hidden; border-top: 1px solid var(--color-gray); } .pp-cta__orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; border-radius: 50%; background: rgba(199,44,51,.15); filter: blur(100px); opacity: .6; z-index: 1; } .pp-cta__inner { position: relative; z-index: 2; } .pp-cta__title { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 22px; letter-spacing: -1px; } .pp-cta__desc { font-size: 1.1rem; color: var(--color-text); max-width: 600px; margin: 0 auto 36px; line-height: 1.6; } .pp-cta__buttons { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } /* ========================================================================== Page header ========================================================================== */ .pp-page-header { padding: 150px 0 50px; text-align: center; background: var(--color-light); } .pp-page-header--dark { background: var(--color-dark); } .pp-page-header--dark .pp-page-header__title { color: var(--color-white); } .pp-page-header__title { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 18px; } .pp-page-header__sub { color: var(--color-text-light); max-width: 700px; margin: 0 auto; } .pp-page-header--dark .pp-page-header__sub { color: #aaa; } /* ========================================================================== About story (Meist intro) ========================================================================== */ .pp-story { padding: 100px 0; background: var(--color-white); } .pp-story__inner { display: grid; gap: 60px; max-width: 1000px; margin: 0 auto; } .pp-story__lead { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4; color: var(--color-text-dark); font-weight: 300; } .pp-story__lead strong { color: var(--color-primary); font-weight: 700; } .pp-story__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; border-top: 1px solid var(--color-gray); padding-top: 50px; } .pp-story__cols h3 { font-size: 1.4rem; margin-bottom: 14px; } .pp-story__cols p { color: var(--color-text); line-height: 1.7; } /* ========================================================================== Tech grid (Meist equipment) ========================================================================== */ .pp-tech { padding: 120px 0; background: var(--color-dark-alt); color: var(--color-white); } .pp-tech__head { margin-bottom: 60px; max-width: 640px; } .pp-tech__head h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -1px; margin-bottom: 10px; color: var(--color-white); } .pp-tech__head p { color: #aaa; font-size: 1.15rem; } .pp-tech__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); } .pp-tech__item { background: var(--color-dark-alt); padding: 46px 36px; transition: background .3s; } .pp-tech__item:hover { background: var(--color-dark); } .pp-tech__item-eyebrow { font-size: 0.82rem; color: var(--color-primary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; } .pp-tech__item h3 { font-size: 1.6rem; margin-bottom: 14px; color: var(--color-white); } .pp-tech__item p { color: #aaa; line-height: 1.6; } /* ========================================================================== Image quote break — bg_image is a block field set inline by render.php (data-cms-image), so only layout/effect properties live here, never a hardcoded url(). ========================================================================== */ .pp-quote-break { min-height: 50vh; position: relative; display: flex; align-items: center; justify-content: center; padding: 100px 20px; background-color: var(--color-dark); background-size: cover; background-position: center; background-attachment: fixed; } @media (max-width: 768px) { /* background-attachment:fixed is unreliable on mobile Safari/Chrome — fall back to scroll */ .pp-quote-break { background-attachment: scroll; } } .pp-quote-break__inner { position: relative; z-index: 2; text-align: center; max-width: 900px; } .pp-quote-break__icon { color: var(--color-primary); margin-bottom: 24px; opacity: .9; } .pp-quote-break__text { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 300; line-height: 1.35; color: var(--color-white); margin-bottom: 28px; letter-spacing: -.5px; } .pp-quote-break__text strong { font-weight: 700; } .pp-quote-break__rule { width: 50px; height: 3px; background: var(--color-primary); margin: 0 auto; } /* ========================================================================== Contact panel ========================================================================== */ .pp-contact { padding: 120px 0; background: var(--color-light); } .pp-contact__wrapper { display: grid; grid-template-columns: 4fr 6fr; background: var(--color-white); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.08); } .pp-contact__info { background: #111; color: var(--color-white); padding: 60px; } .pp-contact__title { font-size: 2.6rem; color: var(--color-white); margin-bottom: 20px; line-height: 1.1; letter-spacing: -1px; } .pp-contact__desc { color: #999; font-size: 1.05rem; margin-bottom: 44px; } .pp-contact__details { display: flex; flex-direction: column; gap: 26px; } .pp-contact__item { display: flex; align-items: center; gap: 18px; color: var(--color-white); font-size: 1.05rem; font-weight: 500; transition: transform .3s, color .3s; } a.pp-contact__item:hover { transform: translateX(5px); color: var(--color-primary); } .pp-icon-circle { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: var(--color-primary); border: 1px solid rgba(199,44,51,0.2); flex-shrink: 0; } .pp-contact__form-panel { padding: 60px; background: var(--color-white); } .pp-field { position: relative; margin-bottom: 25px; } .pp-field input, .pp-field select, .pp-field textarea { width: 100%; padding: 20px 20px 10px; font-size: 1.02rem; font-family: var(--font-main); border: none; border-bottom: 2px solid var(--color-gray); background: transparent; color: var(--color-text-dark); transition: border-color .3s ease; border-radius: 0; resize: vertical; } .pp-field input:focus, .pp-field select:focus, .pp-field textarea:focus { outline: none; border-color: var(--color-primary); } .pp-field label { position: absolute; top: 18px; left: 20px; font-size: 1.02rem; color: var(--color-text-light); pointer-events: none; transition: all .2s ease-out; } .pp-field input:focus + label, .pp-field input:not(:placeholder-shown) + label, .pp-field textarea:focus + label, .pp-field textarea:not(:placeholder-shown) + label, .pp-field select + label { top: 0; font-size: 0.72rem; color: var(--color-primary); font-weight: 600; } .pp-field input::placeholder, .pp-field textarea::placeholder { color: transparent; } .pp-field--error input, .pp-field--error select, .pp-field--error textarea { border-color: #e74c3c !important; } .pp-field__err { color: #e74c3c; font-size: 0.8rem; margin-top: 6px; } .pp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .pp-form-note { font-size: .85rem; color: var(--color-text-light); margin: -6px 0 20px; } .pp-form-success { background: rgba(199,44,51,.08); border-left: 4px solid var(--color-primary); padding: 18px 20px; margin-bottom: 20px; color: var(--color-text-dark); display: none; } .pp-form-error { background: #fdecea; border-left: 4px solid #e74c3c; padding: 18px 20px; margin-bottom: 20px; color: #a32228; display: none; } .pp-contact__map { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); margin-top: 60px; } .pp-contact__map iframe { display: block; width: 100%; height: 420px; border: 0; } /* ========================================================================== FAQ ========================================================================== */ .pp-faq { padding: 100px 0; background: var(--color-white); } .pp-faq__title { text-align: center; font-size: 2.4rem; margin-bottom: 50px; } .pp-faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .pp-faq__item { border: 1px solid var(--color-gray); border-radius: 10px; padding: 4px 26px; background: var(--color-light); } .pp-faq__item summary { cursor: pointer; list-style: none; padding: 22px 0; font-size: 1.1rem; font-weight: 600; color: var(--color-text-dark); display: flex; justify-content: space-between; align-items: center; gap: 20px; } .pp-faq__item summary::-webkit-details-marker { display: none; } .pp-faq__item summary::after { content: '+'; font-size: 1.6rem; font-weight: 400; color: var(--color-primary); transition: transform .25s ease; flex-shrink: 0; } .pp-faq__item[open] summary::after { transform: rotate(45deg); } .pp-faq__item p { color: var(--color-text); line-height: 1.7; padding: 0 0 24px; margin: 0; } @media (prefers-reduced-motion: reduce) { .pp-faq__item summary::after { transition: none; } } /* ========================================================================== Footer (global) ========================================================================== */ .pp-footer { margin-top: auto; padding: 60px 5vw; background: var(--color-dark-alt); border-top: 1px solid rgba(255,255,255,0.1); } .pp-footer__grid { max-width: var(--container-width); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 60px; } .pp-footer__col { display: flex; flex-direction: column; } .pp-footer__col-label { color: var(--color-text-light); font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 15px; } .pp-footer__huge { font-size: 30px; font-weight: 500; color: var(--color-white); letter-spacing: -1px; margin-bottom: 12px; transition: color .3s; } .pp-footer__huge:hover { color: var(--color-primary); } .pp-footer__medium { font-size: 17px; color: var(--color-white); margin-bottom: 10px; transition: color .3s; display: block; } .pp-footer__medium:hover { color: var(--color-primary); } .pp-footer__address { color: var(--color-text-light); font-size: 13px; } .pp-footer__socials { margin-top: 26px; display: flex; gap: 15px; } .pp-footer__socials a { color: var(--color-white); opacity: .6; transition: opacity .3s; } .pp-footer__socials a:hover { opacity: 1; } .pp-footer__legal { max-width: var(--container-width); margin: 0 auto; padding-top: 40px; } .pp-footer__legal p { color: rgba(255,255,255,0.35); font-size: 12.5px; line-height: 1.8; max-width: 900px; } .pp-footer__bottom { max-width: var(--container-width); margin: 42px auto 0; display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; gap: 30px; flex-wrap: wrap; } .pp-footer__small { font-size: 14px; color: #888; font-weight: 300; line-height: 1.6; } .pp-footer__small a { color: inherit; text-decoration: none; } .pp-footer__credit { display: flex; flex-direction: column; text-align: right; margin-left: auto; } .pp-footer__credit-name { font-weight: 800; font-size: 1.1rem; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%), linear-gradient(90deg, var(--color-primary), #ff6b6b); background-size: 200% 100%, 100% 100%; background-position: -200% 0, 0 0; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-block; } .pp-footer__credit:hover .pp-footer__credit-name { animation: pp-glimmer 1.5s infinite linear; } @keyframes pp-glimmer { 0% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .pp-footer__credit:hover .pp-footer__credit-name { animation: none; } } .pp-footer__credit-sub { font-size: 0.75rem; color: var(--color-text-light); } /* ========================================================================== Shop — listing + product ========================================================================== */ .pp-shop__header { padding: 150px 0 40px; text-align: center; background: var(--color-light); } .pp-shop__header h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 10px; } .pp-shop__crumbs { font-size: 0.9rem; color: var(--color-text-light); } .pp-shop__crumbs a { color: var(--color-dark); } .pp-shop__body { padding: 60px 0 100px; background: var(--color-light); min-height: 40vh; } .pp-shop__layout { display: grid; grid-template-columns: 250px 1fr; gap: 50px; } .pp-shop__layout--flat { grid-template-columns: 1fr; } .pp-shop-sidebar { position: sticky; top: 120px; align-self: start; } .pp-shop-sidebar h3 { font-size: 1.1rem; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1px; } .pp-cat-list { border-left: 1px solid rgba(0,0,0,0.08); } .pp-cat-list a { display: block; padding: 9px 15px; color: var(--color-text-light); font-size: 0.93rem; border-left: 2px solid transparent; margin-left: -1px; transition: all .2s ease; } .pp-cat-list a:hover { color: var(--color-dark); border-left-color: rgba(0,0,0,0.2); } .pp-cat-list a.pp-active { color: var(--color-primary); font-weight: 600; border-left-color: var(--color-primary); } .pp-shop-count { color: var(--color-text-light); margin-bottom: 26px; } .pp-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px; } .pp-shop-card { background: var(--color-white); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.05); transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; } .pp-shop-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); } .pp-shop-card__img { position: relative; overflow: hidden; background: #f0f0f0; display: block; } .pp-shop-card__img img { width: 100%; height: 230px; object-fit: cover; transition: transform .5s ease; } .pp-shop-card:hover .pp-shop-card__img img { transform: scale(1.05); } .pp-shop-card__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: .85rem; } .pp-shop-card:hover .pp-shop-card__overlay { opacity: 1; } .pp-shop-card__body { padding: 22px 20px; flex-grow: 1; display: flex; flex-direction: column; } .pp-shop-card__cat { font-size: 0.78rem; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .pp-shop-card__title { margin: 0 0 12px; font-size: 1.15rem; line-height: 1.3; } .pp-shop-card__title a { color: var(--color-dark); } .pp-shop-card__title a:hover { color: var(--color-primary); } .pp-shop-card__price { font-size: 1.3rem; font-weight: 700; color: var(--color-primary); margin-bottom: 16px; } .pp-shop-empty { font-size: 1.05rem; color: var(--color-text-light); } .pp-pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 50px; } .pp-product { padding: 0 0 100px; background: var(--color-white); } .pp-product__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .pp-product__gallery img { width: 100%; height: 500px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-md); } .pp-product__thumbs { display: flex; gap: 15px; margin-top: 15px; } .pp-product__thumbs img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; } .pp-product__cat { font-size: 0.9rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; display: block; } .pp-product__title { font-size: 2.6rem; margin-bottom: 20px; line-height: 1.1; } .pp-product__price { font-size: 2rem; font-weight: 700; color: var(--color-dark); margin-bottom: 30px; } .pp-product__price small { font-size: 1rem; font-weight: 400; color: #888; } .pp-product__desc { font-size: 1.05rem; color: var(--color-text); line-height: 1.8; margin-bottom: 36px; } .pp-product__how { padding: 26px 30px; background: var(--color-light); border-radius: 8px; margin-bottom: 36px; border-left: 4px solid var(--color-primary); } .pp-product__how h4 { margin-bottom: 12px; } .pp-product__how p { margin: 0; font-size: 0.95rem; color: var(--color-text-light); } .pp-product__meta { margin-top: 30px; border-top: 1px solid var(--color-gray); padding-top: 20px; font-size: 0.9rem; color: #888; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .pp-hero__content, .pp-service-row__grid, .pp-service-row--reverse .pp-service-row__grid, .pp-about__grid { grid-template-columns: 1fr; gap: 40px; } .pp-service-row--reverse .pp-service-row__grid > :first-child { order: 0; } } @media (max-width: 992px) { .pp-contact__wrapper { grid-template-columns: 1fr; } .pp-shop__layout { grid-template-columns: 1fr; gap: 40px; } .pp-shop-sidebar { position: static; } .pp-product__layout { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .pp-nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); box-shadow: var(--shadow-md); padding: 8px 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .3s ease, opacity .3s ease, visibility .3s; } .pp-nav.pp-open { max-height: 420px; opacity: 1; visibility: visible; } .pp-nav a { display: block; padding: 14px 24px; min-height: 44px; } .pp-nav a::after { display: none; } .pp-nav-cta-mobile { margin: 10px 24px 6px; padding: 13px 24px; background: var(--color-primary); color: #fff; text-align: center; border-radius: 6px; font-weight: 600; min-height: 44px; } .pp-header-cta { display: none; } .pp-menu-toggle { display: block; } .pp-story__lead { font-size: 1.5rem; } .pp-contact__info, .pp-contact__form-panel { padding: 40px 26px; } .pp-form-row { grid-template-columns: 1fr; } .pp-footer__grid { flex-direction: column; gap: 40px; } .pp-footer__bottom { flex-direction: column; align-items: flex-start; } .pp-footer__credit { text-align: left; margin-left: 0; } } /* ========================================================================== Cart button + drawer ========================================================================== */ .pp-cart-btn { position: relative; display: flex; align-items: center; background: none; border: none; cursor: pointer; color: var(--color-text-dark); padding: 0; } .pp-cart-btn:hover { color: var(--color-primary); } .pp-cart-badge { position: absolute; top: -8px; right: -10px; background: var(--color-primary); color: #fff; font-size: 0.7rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; } .pp-cart-badge.pp-on { display: flex; } .pp-drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 199; opacity: 0; transition: opacity .3s ease; } .pp-drawer-scrim.pp-on { opacity: 1; } .pp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: var(--color-white); z-index: 200; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px rgba(0,0,0,.15); } .pp-drawer.pp-on { transform: translateX(0); } .pp-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--color-gray); } .pp-drawer__top h2 { font-size: 1.3rem; margin: 0; } .pp-drawer__close { background: none; border: none; cursor: pointer; color: var(--color-text-dark); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .pp-drawer__close:hover { color: var(--color-primary); } .pp-drawer__items { flex: 1; overflow-y: auto; padding: 10px 26px; } .pp-drawer__empty { color: var(--color-text-light); padding: 30px 0; text-align: center; } .pp-ci { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--color-gray); } .pp-ci__name { font-weight: 600; font-size: 0.95rem; } .pp-ci__name small { color: var(--color-text-light); font-weight: 400; } .pp-ci__price { color: var(--color-text-light); font-size: 0.85rem; margin-top: 2px; } .pp-ci__qty { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-gray); border-radius: 20px; padding: 2px 4px; } .pp-ci__qty button { width: 22px; height: 22px; border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--color-text-dark); } .pp-ci__qty button:hover { color: var(--color-primary); } .pp-ci__qty span { min-width: 16px; text-align: center; font-size: 0.9rem; } .pp-ci__remove { background: none; border: none; cursor: pointer; color: var(--color-text-light); font-size: 1.2rem; line-height: 1; padding: 4px; } .pp-ci__remove:hover { color: var(--color-primary); } .pp-drawer__foot { padding: 20px 26px 26px; border-top: 1px solid var(--color-gray); } .pp-drawer__sum { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; margin-bottom: 16px; } .pp-drawer__cart-link { display: block; text-align: center; color: var(--color-text-dark); font-size: 0.9rem; margin-top: 10px; text-decoration: underline; } /* ========================================================================== Cart page ========================================================================== */ .pp-cart-page { padding: 150px 0 100px; min-height: 50vh; } .pp-co-empty { color: var(--color-text-light); font-size: 1.05rem; } .pp-co-qty { color: var(--color-text-light); font-size: 0.9rem; margin-left: 8px; } .pp-woo-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .pp-woo-table th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-light); padding: 10px 12px; border-bottom: 2px solid var(--color-gray); } .pp-woo-table td { padding: 16px 12px; border-bottom: 1px solid var(--color-gray); vertical-align: middle; } .pp-woo-total td { font-weight: 700; font-size: 1.1rem; border-bottom: none; padding-top: 20px; } .pp-cart-table .pp-qty { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--color-gray); border-radius: 20px; padding: 4px 10px; } .pp-cart-table .pp-qty button { border: none; background: none; cursor: pointer; font-size: 1.1rem; } .pp-cart-table [data-remove] { background: none; border: none; cursor: pointer; color: var(--color-text-light); font-size: 1.3rem; } .pp-cart-table [data-remove]:hover { color: var(--color-primary); } /* ========================================================================== Checkout ========================================================================== */ .pp-checkout { padding: 150px 0 100px; } .pp-checkout__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; } .pp-co-section { margin-bottom: 36px; } .pp-co-section h2 { font-size: 1.2rem; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--color-gray); } .pp-co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pp-cfield { display: flex; flex-direction: column; margin-bottom: 18px; } .pp-cfield span { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-light); margin-bottom: 8px; } .pp-cfield input, .pp-cfield textarea { padding: 13px 16px; border: 1px solid var(--color-gray); border-radius: 6px; font-family: var(--font-main); font-size: 1rem; background: var(--color-white); transition: border-color .2s; } .pp-cfield input:focus, .pp-cfield textarea:focus { outline: none; border-color: var(--color-primary); } .pp-cfield__err { color: #e74c3c; font-size: 0.8rem; margin-top: 6px; display: none; } .pp-cfield.pp-has-err input, .pp-cfield.pp-has-err textarea { border-color: #e74c3c; } .pp-cfield.pp-has-err .pp-cfield__err { display: block; } .pp-radio-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-gray); border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: border-color .2s, background .2s; } .pp-radio-card:hover { border-color: var(--color-text-light); } .pp-radio-card input { margin-top: 3px; accent-color: var(--color-primary); } .pp-radio-card input:checked ~ span { color: var(--color-text-dark); } .pp-radio-card:has(input:checked) { border-color: var(--color-primary); background: rgba(199,44,51,.04); } .pp-radio-card span b { display: block; font-weight: 600; font-size: 0.95rem; } .pp-radio-card span small { display: block; color: var(--color-text-light); font-size: 0.82rem; margin-top: 2px; } .pp-co-summary { position: sticky; top: 120px; background: var(--color-light); border-radius: 12px; padding: 28px; } .pp-co-summary h2 { font-size: 1.15rem; margin-bottom: 16px; } .pp-pay-note { font-size: 0.82rem; color: var(--color-text-light); margin: 16px 0; line-height: 1.5; } .pp-cform__ok, .pp-cform__err { padding: 16px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 0.92rem; line-height: 1.5; } .pp-cform__ok { background: rgba(199,44,51,.06); border-left: 4px solid var(--color-primary); } .pp-cform__err { background: #fdecea; border-left: 4px solid #e74c3c; color: #a32228; } .pp-cform__err a { color: inherit; text-decoration: underline; } .pp-pay-methods { display: flex; flex-direction: column; gap: 10px; } .pp-pay-method { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-gray); border-radius: 8px; color: var(--color-text-dark); } .pp-pay-method:hover { border-color: var(--color-primary); color: var(--color-primary); } .pp-pay-method img { height: 24px; width: auto; } .pp-hp { position: absolute; left: -9999px; } /* ========================================================================== Order return / status ========================================================================== */ .pp-co-received { max-width: 640px; margin: 0 auto; text-align: center; padding: 150px 0 100px; } .pp-co-received__badge { width: 70px; height: 70px; border-radius: 50%; background: rgba(199,44,51,.08); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .pp-co-received h2 { font-size: 2rem; margin-bottom: 14px; } .pp-co-received__table { text-align: left; margin: 30px 0; } .pp-lookup-card { max-width: 480px; margin: 30px 0; background: var(--color-light); border-radius: 12px; padding: 30px; } .pp-lookup-result { max-width: 620px; margin-top: 30px; background: var(--color-light); border-radius: 12px; padding: 30px; } .pp-cta-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 30px; } .pp-btn-text { color: var(--color-text-dark); text-decoration: underline; font-size: 0.95rem; } /* ========================================================================== Shop card / product page add-to-cart additions ========================================================================== */ .pp-shop-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pp-out-badge { display: inline-block; background: var(--color-gray); color: var(--color-text-light); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 10px; border-radius: 20px; } .pp-shop-card.pp-is-out .pp-shop-card__img img { filter: grayscale(60%); opacity: .7; } .pp-btn--sm { padding: 8px 16px; font-size: 0.78rem; } .pp-qty-stepper { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--color-gray); border-radius: 30px; padding: 6px 16px; } .pp-qty-stepper button { width: 24px; height: 24px; border: none; background: none; cursor: pointer; font-size: 1.1rem; color: var(--color-text-dark); } .pp-qty-stepper button:hover { color: var(--color-primary); } .pp-qty-stepper input { width: 30px; border: none; text-align: center; font-size: 1rem; background: none; } .pp-product__row { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .pp-stock-note { font-size: 0.9rem; color: var(--color-text-light); } .pp-stock-note .pp-low { color: #b8860b; font-weight: 600; } .pp-stock-note .pp-out { color: #e74c3c; font-weight: 600; } .pp-or-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--color-text-light); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; } .pp-or-divider::before, .pp-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-gray); } @media (max-width: 992px) { .pp-checkout__grid { grid-template-columns: 1fr; } .pp-co-summary { position: static; } } @media (max-width: 600px) { .pp-co-row { grid-template-columns: 1fr; } .pp-drawer { width: 100vw; } } /* ========================================================================== Legal pages (Müügitingimused / Privaatsuspoliitika) ========================================================================== */ .pp-legal { padding: 150px 0 100px; } .pp-legal__wrap { max-width: 760px; } .pp-legal__title { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; } .pp-legal__updated { color: var(--color-text-light); font-size: 0.9rem; margin-bottom: 40px; } .pp-legal__body h2 { font-size: 1.4rem; margin: 40px 0 16px; } .pp-legal__body h2:first-child { margin-top: 0; } .pp-legal__body p { color: var(--color-text); line-height: 1.75; margin-bottom: 16px; } .pp-legal__body ul, .pp-legal__body ol { margin: 0 0 16px 22px; color: var(--color-text); line-height: 1.75; } .pp-legal__body li { margin-bottom: 8px; } .pp-legal__body a { text-decoration: underline; } .pp-legal__body strong { color: var(--color-text-dark); }