/* Theme Name: Jewellery Landing Page Author: Xarva Media Description: Luxury editorial WordPress landing page for jewellery brands. Product and category content is managed from the WordPress Customizer. Version: 7.1.1 */ :root{ --maroon:#650d2f; --maroon-dark:#42051d; --maroon-deep:#300311; --gold:#c9952e; --gold-light:#e3bd67; --cream:#fbf6ee; --cream-2:#f3e9dc; --white:#fffaf3; --ink:#17202a; --muted:#716862; --border:#dfcdb9; --charcoal:#211b18; --shadow:0 22px 60px rgba(50,25,15,.12); --serif:Georgia,"Times New Roman",serif; --sans:Arial,Helvetica,sans-serif; --display:Georgia,"Times New Roman",serif; } *{box-sizing:border-box} html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden} body{margin:0;max-width:100%;overflow-x:hidden;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.55} body,button,input,textarea,select{font-family:var(--sans)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .container{width:min(1180px,calc(100% - 48px));margin:0 auto} .wide-container{width:min(1500px,calc(100% - 64px));margin:0 auto} .section{padding:100px 0} .cream-section{background:var(--cream)} .maroon-section{background:var(--maroon);color:var(--white)} .gold-text{color:var(--gold-light)} .maroon-text{color:var(--maroon)} .eyebrow{margin:0 0 15px;font-size:11px;letter-spacing:.34em;font-weight:700;text-transform:uppercase} .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 25px;border:1px solid transparent;border-radius:4px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;transition:.25s ease} .btn:hover{transform:translateY(-2px)} .btn-gold{background:var(--gold);color:#21130b} .btn-gold:hover{background:var(--gold-light)} .btn-maroon{background:var(--maroon);color:var(--white)} .btn-maroon:hover{background:var(--maroon-dark)} .btn-outline{border-color:rgba(255,255,255,.65);color:#fff;background:transparent} .btn-small{min-height:40px;padding:9px 16px;font-size:9px} .text-link{display:inline-block;margin-top:20px;color:var(--maroon);font:600 16px var(--serif);border-bottom:1px solid var(--gold)} .section-rule{margin-top:42px;height:1px;background:rgba(169,119,45,.5);position:relative} .section-rule span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 16px;background:var(--cream);color:var(--gold);font-size:22px} /* Header */ .site-header{position:sticky;top:0;z-index:1000;background:rgba(48,3,17,.98);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.14)} .nav-wrap{min-height:78px;display:flex;align-items:center;gap:28px} .brand{width:160px;flex:0 0 auto} .brand img,.brand .custom-logo{width:auto;max-width:160px;height:55px;object-fit:contain} .desktop-nav{display:flex;align-items:center;justify-content:center;gap:24px;flex:1} .desktop-nav a,.nav-whatsapp{font-size:10px;letter-spacing:.11em;text-transform:uppercase} .desktop-nav a:hover,.nav-whatsapp:hover{color:var(--gold-light)} .nav-actions{display:flex;align-items:center;gap:14px} .nav-whatsapp{color:var(--gold-light)} .menu-toggle{display:none;border:0;background:none;color:#fff;font-size:25px} .mobile-menu{display:none;padding:0 24px 20px} .mobile-menu a{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:11px;letter-spacing:.1em;text-transform:uppercase} /* Hero */ .hero{min-height:700px;position:relative;overflow:hidden;display:flex;align-items:center} .hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:55px;position:relative;z-index:2} .hero h1,.diamond-intro h2,.lead-heading h2{margin:0;font:500 clamp(54px,6.5vw,92px)/.92 var(--serif);letter-spacing:-.035em} .hero h1 em,.diamond-intro h2 em{color:var(--gold-light);font-style:italic} .hero-text{max-width:560px;margin:25px 0 30px;color:rgba(255,255,255,.82);font-size:15px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap} .tagline{margin:35px 0 0;color:var(--gold-light);font:italic 24px var(--display)} .hero-art{min-height:570px;display:flex;align-items:center;justify-content:center} .hero-frame{width:min(560px,100%);height:560px;border:1px solid rgba(227,189,103,.5);padding:10px;transform:rotate(.7deg);box-shadow:0 30px 80px rgba(0,0,0,.3)} .pp-image{width:100%;height:100%;object-fit:cover} .image-placeholder{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:linear-gradient(145deg,#eee0d0,#dfcdb9);color:var(--maroon);font:500 20px var(--serif);letter-spacing:.06em} .hero-frame .image-placeholder{background:linear-gradient(145deg,#7d2448,#3d061e);color:#fff} .hero-orbit{position:absolute;border:1px solid rgba(212,160,23,.2);border-radius:50%} .orbit-one{width:680px;height:680px;right:-320px;top:-300px} .orbit-two{width:340px;height:340px;left:-200px;bottom:-220px} /* Product block */ .split-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:end;margin-bottom:42px} .split-heading h2,.center-heading h2,.journal-head h2{margin:0;font:500 clamp(45px,5vw,70px)/.98 var(--serif);letter-spacing:-.03em} .split-heading p,.center-heading>p:last-child{color:var(--muted);font-size:14px} .product-grid-eight{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px} .product-card{border:1px solid var(--border);background:rgba(255,255,255,.45);overflow:hidden;transition:.3s ease} .product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .product-image{display:block;height:390px;background:#ead8cc} .product-image .pp-image{object-fit:cover} .product-info{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:18px 17px 20px} .product-index{color:var(--gold);font-size:10px;letter-spacing:.12em} .product-info h3{margin:0 0 8px;font:600 22px/1.05 var(--serif)} .product-info a{color:var(--maroon);font:600 10px var(--sans);letter-spacing:.1em;text-transform:uppercase} /* Category carousel */ .category-section{overflow:hidden} .center-heading{text-align:center;max-width:850px;margin:0 auto 45px} .center-heading>p:last-child{max-width:560px;margin:15px auto 0} .category-marquee{overflow:hidden;margin:0 -24px;padding:0 24px} .category-track{display:flex;width:max-content;gap:16px;animation:ppCategoryScroll 34s linear infinite} .category-marquee:hover .category-track{animation-play-state:paused} .category-card{width:220px;flex:0 0 220px;padding:0 0 18px;text-align:center;border:1px solid var(--border);background:#fffaf4;overflow:hidden} .category-image{height:285px} .category-image .pp-image{width:100%;height:100%;object-fit:cover} .category-card h3{margin:17px 10px 7px;font:500 23px var(--serif);text-transform:uppercase;letter-spacing:.12em} .category-card>span{color:var(--maroon);font:600 10px var(--sans);letter-spacing:.12em;text-transform:uppercase} @keyframes ppCategoryScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}} /* Gold shortcode */ .rate-section{padding:90px 0;background:#f4e5e8;border-top:1px solid rgba(106,13,50,.1);border-bottom:1px solid rgba(106,13,50,.1)} .rate-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px} .rate-head h2{margin:0;font:500 clamp(48px,5vw,72px) var(--serif);color:var(--maroon)} .updated{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--maroon)} .shortcode-box{width:100%} .shortcode-box:empty{min-height:120px;border:1px dashed var(--border)} .rate-note{margin:18px auto 0;max-width:900px;text-align:center;color:var(--muted);font-size:10px} /* Promise */ .promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .promise{padding:25px 32px;text-align:center;border-right:1px solid var(--border)} .promise:last-child{border-right:0} .promise-icon{width:78px;height:78px;margin:0 auto 16px;border:1px solid #dcbf9e;border-radius:50%;display:grid;place-items:center;color:var(--gold);font:32px var(--serif);background:#fff8ef} .promise-number{display:block;color:var(--gold);font:600 25px var(--serif)} .promise h3{margin:10px 0;color:var(--maroon);font:600 22px var(--serif);text-transform:uppercase;letter-spacing:.1em} .promise p{margin:0;color:var(--muted);font-size:12px} /* Diamonds: 4 cards */ .diamond-feature{padding:95px 0} .diamond-intro{max-width:850px;margin-bottom:42px} .diamond-intro>p:last-child{max-width:670px;color:rgba(255,255,255,.78);font-size:14px} .diamond-four-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .diamond-card{border:1px solid rgba(227,189,103,.35);background:rgba(255,255,255,.035);overflow:hidden} .diamond-card-image{height:310px} .diamond-card-copy{padding:22px 20px 25px} .diamond-card-copy>span{color:var(--gold-light);font-size:9px;letter-spacing:.2em;font-weight:700} .diamond-card-copy h3{margin:10px 0 8px;font:600 22px/1.05 var(--serif)} .diamond-card-copy p{margin:0;color:rgba(255,255,255,.7);font-size:11px} /* Lead / Form — 2x2 CTA cards + shortcode block */ .lead-section{padding:90px 0;position:relative;overflow:hidden} .lead-section .lead-bg-layer{position:absolute;inset:0;background-image:var(--pp-lead-bg-image);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:var(--pp-lead-bg-opacity,0);z-index:0;pointer-events:none} .lead-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch} .lead-cta-grid{min-height:650px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .lead-cta-card{min-width:0;min-height:0;padding:30px 22px;border:1px solid rgba(227,189,103,.55);background:rgba(250,245,235,.96);color:var(--maroon);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease} .lead-cta-card:nth-child(1),.lead-cta-card:nth-child(4){background:rgba(106,13,50,.96);color:#fffaf4} .lead-cta-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.14)} .lead-cta-image{width:82px;height:82px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;overflow:hidden;flex:0 0 auto} .lead-cta-image .pp-image{width:100%;height:100% !important;object-fit:contain !important;border-radius:50%;padding:6px;box-sizing:border-box} .lead-cta-image-placeholder{width:38px;height:38px;border:1px solid currentColor;border-radius:50%;display:block;opacity:.55} .lead-cta-title{font:600 24px/1.15 var(--serif);text-transform:uppercase;letter-spacing:.04em} .lead-cta-description{margin-top:10px;max-width:240px;font-size:13px;line-height:1.55;opacity:.78} .lead-cta-arrow{margin-top:18px;font-size:25px;line-height:1} .lead-form-block{min-height:650px;border:1px solid rgba(227,189,103,.35);padding:45px;background:var(--cream);color:var(--ink)} .lead-heading h2{font-size:clamp(44px,4.7vw,70px);color:var(--ink)} .lead-heading>p:not(.eyebrow){color:var(--muted);max-width:550px} .lead-shortcode-wrap{margin-top:28px} .admin-only-shortcode-note{padding:18px;border:1px dashed #c9b59f;background:#fffaf4;color:var(--muted);font-size:12px} .lead-form-block input,.lead-form-block select,.lead-form-block textarea{max-width:100%} /* Appointment: exactly 2 inner blocks */ .appointment-section{padding:85px 0;background:#f7ecee} .appointment-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch} .appointment-image{min-height:600px} .appointment-image .pp-image,.appointment-image .image-placeholder{height:100%;min-height:600px;object-fit:cover} .appointment-copy{padding:65px 65px;background:#fffaf4;display:flex;flex-direction:column;justify-content:center} .appointment-copy h2{margin:0;color:var(--maroon);font:500 clamp(48px,5vw,72px)/.96 var(--serif)} .appointment-copy>p:not(.eyebrow){max-width:540px;color:var(--muted);font-size:15px} .appointment-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:25px 0 32px} .appointment-benefits span{display:flex;gap:12px;align-items:center;color:var(--maroon);font-size:10px;letter-spacing:.08em;text-transform:uppercase} .appointment-benefits b{width:44px;height:44px;border:1px solid #dec6a9;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:20px} /* Journal */ .journal-section{padding-left:0;padding-right:0} .journal-head{display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:end;margin-bottom:38px} .journal-head>div:first-child{max-width:850px} .journal-head p:last-child{margin:8px 0 0;color:var(--muted)} .journal-quote{color:var(--maroon);font:italic 23px/1.25 var(--serif);text-align:right} .journal-grid-four{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .journal-card{border:1px solid var(--border);background:#fffaf4;overflow:hidden} .journal-image{height:300px} .journal-image .pp-image,.journal-image .image-placeholder{height:100%;object-fit:cover} .journal-copy{padding:20px} .journal-copy>span{color:var(--maroon);font-size:9px;letter-spacing:.18em;font-weight:700} .journal-copy h3{margin:8px 0;font:600 27px/1.05 var(--serif)} .journal-copy p{margin:0 0 15px;color:var(--muted);font-size:12px} .journal-copy>a{color:var(--maroon);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .journal-more{text-align:center;margin-top:38px} /* Footer */ .site-footer{position:relative;overflow:hidden;background:var(--charcoal);color:#fff8ed;padding:75px 0 22px} .footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.25fr 1fr;gap:34px;padding-bottom:52px} .footer-brand .brand-logo,.footer-brand .custom-logo{width:auto;max-width:190px;height:70px;object-fit:contain} .footer-brand h3{margin:0;color:var(--gold-light);font:500 39px var(--serif);letter-spacing:.12em} .footer-tagline{color:var(--gold-light)!important;font:italic 22px var(--serif)!important} .site-footer h4{margin:0 0 18px;color:var(--gold-light);font:600 16px var(--serif);letter-spacing:.12em;text-transform:uppercase} .site-footer a,.site-footer p{display:block;margin:9px 0;color:rgba(255,248,237,.74);font-size:11px} .site-footer a:hover{color:#fff} .social-row{display:flex;gap:10px;margin:10px 0 18px} .social-row a{width:42px;height:42px;border:1px solid var(--gold-light);border-radius:50%;display:grid;place-items:center;color:var(--gold-light);margin:0;font-weight:700} .hashtag{color:#fff!important;font-size:17px!important} .footer-whatsapp{padding:14px 17px;border:1px solid var(--gold-light);color:#fff!important;text-align:center} .footer-trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(227,189,103,.4);border-bottom:1px solid rgba(227,189,103,.25);padding:23px 0;gap:20px} .footer-trust span{display:grid;grid-template-columns:36px 1fr;column-gap:8px;align-items:center;color:var(--gold-light);font-size:22px} .footer-trust b{font-size:10px;letter-spacing:.18em;text-transform:uppercase} .footer-trust small{grid-column:2;color:rgba(255,255,255,.55);font-size:9px;letter-spacing:.08em} .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:rgba(255,255,255,.45);font-size:9px} .footer-bottom a{display:inline;color:inherit;font-size:inherit} .footer-leaf{position:absolute;color:rgba(201,149,46,.14);font-size:150px} .footer-leaf-one{left:-25px;bottom:90px}.footer-leaf-two{right:-25px;top:-20px} /* Motion */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease} .reveal.visible{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .category-track{animation:none} } /* Responsive */ @media(max-width:1100px){ .desktop-nav{gap:14px}.desktop-nav a{font-size:8px} .product-grid-eight{grid-template-columns:repeat(4,minmax(0,1fr))} .diamond-four-grid{grid-template-columns:repeat(2,1fr)} .journal-grid-four{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:820px){ .container{width:min(100% - 30px,700px)} .wide-container{width:min(100% - 30px,700px)} .desktop-nav,.nav-actions{display:none} .menu-toggle{display:block;margin-left:auto} .mobile-menu.open{display:block} .hero{padding:70px 0}.hero-grid{grid-template-columns:1fr;gap:40px}.hero-art{min-height:430px}.hero-frame{height:430px} .split-heading{grid-template-columns:1fr;gap:10px} .product-grid-eight{grid-template-columns:repeat(2,1fr)} .category-card{width:190px;flex-basis:190px}.category-image{height:250px} .rate-head{display:block}.updated{margin-top:12px} .promise-grid{grid-template-columns:repeat(2,1fr)}.promise{border-bottom:1px solid var(--border)}.promise:nth-child(2){border-right:0} .lead-inner,.appointment-grid{grid-template-columns:1fr} .lead-cta-grid{min-height:auto} .lead-form-block{min-height:auto} .appointment-image,.appointment-image .pp-image,.appointment-image .image-placeholder{min-height:430px} .appointment-copy{padding:45px 30px} .journal-head{grid-template-columns:1fr}.journal-quote{text-align:left} .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} .footer-trust{grid-template-columns:repeat(2,1fr)} .footer-bottom{flex-direction:column} } @media(max-width:560px){ .section{padding:70px 0} .category-marquee{margin:0 -10px;padding:0 10px} .category-track{gap:10px} .category-card{width:calc((100vw - 40px)/2);flex-basis:calc((100vw - 40px)/2);padding-bottom:14px} .category-image{height:220px} .category-card h3{margin:13px 6px 6px;font-size:17px;letter-spacing:.08em} .category-card>span{font-size:9px} .product-grid-eight{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .diamond-four-grid,.journal-grid-four{grid-template-columns:1fr} .product-image{height:270px} .product-info{grid-template-columns:24px 1fr;padding:14px 12px 16px;gap:7px} .product-info h3{font-size:18px} .product-info a{font-size:9px} .promise-grid{grid-template-columns:1fr}.promise{border-right:0} .appointment-benefits{grid-template-columns:1fr} .footer-grid,.footer-trust{grid-template-columns:1fr} .footer-brand{grid-column:auto} .hero h1,.diamond-intro h2,.lead-heading h2{font-size:48px} } /* ========================================================= JEWELLERY LANDING PAGE — 3 ROW / 3 COLUMN LUXURY HEADER ========================================================= */ .pp-luxury-header{position:sticky;top:0;z-index:1000;background:#300311;color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.16)} .pp-header-row{border-bottom:1px solid rgba(227,189,103,.20)} .pp-header-row:last-of-type{border-bottom:0} .pp-header-container{width:min(1380px,calc(100% - 48px));margin:0 auto} .pp-header-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center} .pp-h-col{min-width:0} .pp-h-left{text-align:left} .pp-h-center{text-align:center} .pp-h-right{text-align:right} .pp-header-row-top{min-height:34px;background:#42051d;color:rgba(255,255,255,.82)} .pp-header-row-top .pp-header-grid{min-height:34px} .pp-header-mini,.pp-header-announcement,.pp-header-row-top a{font-size:9px;letter-spacing:.18em;text-transform:uppercase} .pp-header-announcement{color:#e3bd67} .pp-header-main{min-height:92px} .pp-header-main-grid{min-height:92px} .pp-header-logo{display:flex;align-items:center;justify-content:center;width:190px;height:64px;max-width:190px;min-width:0;flex:0 0 auto;overflow:hidden;box-sizing:border-box;line-height:0} .pp-header-logo img,.pp-header-logo .custom-logo,.pp-header-logo .brand-logo{display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center center} .pp-header-appointment,.pp-h-nav-side a{font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#e3bd67} .pp-header-appointment{display:inline-block;border:1px solid rgba(227,189,103,.7);padding:11px 16px} .pp-header-appointment:hover,.pp-h-nav-side a:hover{color:#fff;border-color:#fff} .pp-header-nav-row{min-height:48px;background:#211b18} .pp-header-nav-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:48px} .pp-primary-nav{display:flex;align-items:center;justify-content:center;gap:27px;flex-wrap:wrap} .pp-primary-nav a{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.92);white-space:nowrap} .pp-primary-nav a:hover{color:#e3bd67} .pp-h-nav-side{font-size:9px} .pp-mobile-toggle{display:none;border:0;background:none;color:#fff;padding:8px 0;font-size:18px;cursor:pointer} .pp-mobile-toggle span{font-size:9px;letter-spacing:.15em;text-transform:uppercase;vertical-align:2px;margin-left:4px} .pp-header-mobile{display:none;padding:4px 24px 18px;background:#300311} .pp-header-mobile a{display:block;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.10);font-size:10px;letter-spacing:.15em;text-transform:uppercase} @media (max-width:900px){ .pp-header-container{width:min(100% - 32px,1380px)} .pp-primary-nav{gap:15px} .pp-primary-nav a{font-size:8px} } @media (max-width:700px){ .pp-luxury-header{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);} .pp-header-row-top{display:none} .pp-header-main,.pp-header-main-grid{min-height:70px} .pp-header-main-grid{grid-template-columns:1fr 1fr 1fr} .pp-header-logo{width:150px;height:52px;max-width:150px;min-width:0} .pp-header-logo img,.pp-header-logo .custom-logo,.pp-header-logo .brand-logo{width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain} .pp-mobile-toggle{display:inline-block} .pp-header-main .pp-h-right{display:none} .pp-header-nav-row{display:none} .pp-header-mobile.is-open{display:block} } /* ========================================================= HEADER LOGO — HARD SIZE CONSTRAINT ========================================================= */ .pp-header-logo{ width:190px !important; height:64px !important; min-width:0 !important; min-height:0 !important; max-width:100% !important; overflow:hidden !important; display:flex !important; align-items:center !important; justify-content:center !important; line-height:0 !important; } .pp-header-logo-image{ display:block !important; width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; min-width:0 !important; min-height:0 !important; object-fit:contain !important; object-position:center center !important; flex:0 1 auto !important; } @media(max-width:700px){ .pp-header-logo{width:150px !important;height:52px !important;max-width:150px !important;} .pp-header-logo-image{max-width:100% !important;max-height:100% !important;} } /* ========================================================= JEWELLERY LANDING PAGE — CUSTOMIZER CONTROLLED FOOTER ========================================================= */ .pp-site-footer{position:relative;overflow:hidden;background:#211b18;color:#fff8ed} .pp-footer-row{border-bottom:1px solid rgba(227,189,103,.20)} .pp-footer-container{width:min(1380px,calc(100% - 48px));margin:0 auto} .pp-footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px;align-items:center} .pp-footer-row-one{padding:55px 0 42px;background:#211b18} .pp-footer-row-two{padding:26px 0;background:#300311} .pp-footer-row-three{padding:18px 0;background:#211b18} .pp-footer-col{min-width:0} .pp-footer-left{text-align:left}.pp-footer-center{text-align:center}.pp-footer-right{text-align:right} .pp-footer-logo img{width:auto;max-width:190px;height:62px;object-fit:contain;margin-bottom:14px} .pp-footer-brand{margin:0;color:#e3bd67;font:500 30px/1.1 Georgia,"Times New Roman",serif;letter-spacing:.10em} .pp-footer-tagline{margin:8px 0 0;color:#e3bd67;font:italic 18px Georgia,"Times New Roman",serif} .pp-footer-heading{margin:0 0 12px;color:#e3bd67;font:600 12px Georgia,"Times New Roman",serif;letter-spacing:.16em;text-transform:uppercase} .pp-footer-text,.pp-footer-contact{margin:7px 0;color:rgba(255,248,237,.72);font-size:11px;line-height:1.65} .pp-footer-link{display:block;margin:7px 0;color:rgba(255,248,237,.78);font-size:10px;letter-spacing:.08em;text-transform:uppercase} .pp-footer-link:hover{color:#e3bd67} .pp-footer-social{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:12px} .pp-footer-social a{width:36px;height:36px;border:1px solid rgba(227,189,103,.7);border-radius:50%;display:grid;place-items:center;color:#e3bd67;font-size:10px} .pp-footer-social a:hover{color:#fff;border-color:#fff} .pp-footer-cta{display:inline-block;margin-top:10px;border:1px solid rgba(227,189,103,.7);padding:11px 16px;color:#e3bd67;font-size:9px;letter-spacing:.16em;text-transform:uppercase} .pp-footer-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pp-footer-trust-item{display:grid;grid-template-columns:34px 1fr;column-gap:9px;align-items:center;text-align:left} .pp-footer-trust-item b{color:#e3bd67;font-size:9px;letter-spacing:.14em;text-transform:uppercase} .pp-footer-trust-item small{grid-column:2;color:rgba(255,255,255,.50);font-size:8px;letter-spacing:.05em} .pp-footer-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;color:rgba(255,255,255,.45);font-size:9px} .pp-footer-bottom a{display:inline;color:inherit;font-size:inherit;margin-left:14px} .pp-footer-bottom a:hover{color:#fff} @media(max-width:700px){ .pp-footer-container{width:min(100% - 32px,700px)} .pp-footer-grid{grid-template-columns:1fr;gap:25px} .pp-footer-left,.pp-footer-center,.pp-footer-right{text-align:center} .pp-footer-trust{grid-template-columns:1fr} .pp-footer-trust-item{max-width:330px;margin:0 auto} .pp-footer-bottom{flex-direction:column;text-align:center} } /* ========================================================= JEWELLERY LANDING PAGE — ATTACHED MASTER CSS OVERRIDE This section is the supplied CSS file, applied last so it controls the visual layer without removing theme structure. ========================================================= */ /* ========================================================= JEWELLERY LANDING PAGE — LUXURY MASTER CSS Edit ONLY the values inside :root to change the look. No theme files need to be edited. ========================================================= */ /* ========================================================= 01. MASTER DESIGN CONTROLS ========================================================= */ :root { /* ---------- MAIN COLORS ---------- */ --pj-maroon: #43051f; --pj-deep-maroon: #25000f; --pj-burgundy: #650b32; --pj-gold: #d4a017; --pj-gold-light: #e7c66d; --pj-cream: #fbf5ec; --pj-white: #ffffff; --pj-black: #151212; --pj-text: #292326; --pj-muted: #777077; /* ---------- BORDERS ---------- */ --pj-border: rgba(212,160,23,.25); --pj-border-soft: rgba(67,5,31,.12); /* ---------- GLOBAL LAYOUT ---------- */ --pj-content-width: 1380px; --pj-section-space: 110px; --pj-section-radius: 0px; /* ---------- CARDS ---------- */ --pj-card-radius: 0px; --pj-card-shadow: 0 20px 60px rgba(30,0,15,.10); --pj-card-hover-shadow: 0 35px 90px rgba(30,0,15,.20); /* ---------- ANIMATION ---------- */ --pj-speed: .45s; --pj-ease: cubic-bezier(.22,.61,.36,1); } /* IMPORTANT: Header and footer colors, fonts, spacing, logo, rows and layout are intentionally NOT styled in this CSS file. Those are controlled from Appearance → Customize → Header / Footer. */ /* ========================================================= 02. SMOOTH MENU JUMPING Header and footer appearance are NOT controlled here. ========================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 100px; } /* Keep anchor targets from hiding behind the fixed/sticky header */ section[id], div[id] { scroll-margin-top: 100px; } /* ========================================================= 03. GLOBAL PAGE ========================================================= */ body { background: var(--pj-cream); color: var(--pj-text); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Better text selection */ ::selection { background: var(--pj-gold); color: var(--pj-deep-maroon); } /* ========================================================= 04. GLOBAL LINKS ========================================================= */ a { transition: color var(--pj-speed) var(--pj-ease), background var(--pj-speed) var(--pj-ease), border-color var(--pj-speed) var(--pj-ease), transform var(--pj-speed) var(--pj-ease); } /* ========================================================= 05. HERO ========================================================= */ .hero { min-height: 760px; background: radial-gradient( circle at 75% 35%, rgba(212,160,23,.12), transparent 30% ), linear-gradient( 135deg, var(--pj-deep-maroon), var(--pj-maroon) ) !important; } /* Hero heading */ .hero h1 { text-shadow: 0 10px 40px rgba(0,0,0,.20); } /* Hero image */ .hero-frame { transition: transform .8s var(--pj-ease), box-shadow .8s var(--pj-ease); } .hero-frame:hover { transform: rotate(0deg) scale(1.015); box-shadow: 0 40px 100px rgba(0,0,0,.35); } /* Hero buttons */ .hero-actions .btn { transition: all .35s var(--pj-ease); } .hero-actions .btn:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(0,0,0,.18); } /* ========================================================= 06. ALL SECTIONS ========================================================= */ .section, .rate-section, .lead-section, .appointment-section, .journal-section { position: relative; } /* Section spacing */ .section { padding-top: var(--pj-section-space); padding-bottom: var(--pj-section-space); } /* ========================================================= 07. SECTION HEADING ========================================================= */ .split-heading h2, .center-heading h2, .journal-head h2 { transition: color .35s ease, transform .35s ease; } /* Gold eyebrow */ .eyebrow { letter-spacing: .22em; text-transform: uppercase; } /* ========================================================= 08. PRODUCT CARDS ========================================================= */ .product-card { position: relative; overflow: hidden; border-radius: var(--pj-card-radius); box-shadow: var(--pj-card-shadow); transition: transform .55s var(--pj-ease), box-shadow .55s var(--pj-ease); } .product-card:hover { transform: translateY(-10px); box-shadow: var(--pj-card-hover-shadow); } /* Product image zoom */ .product-card .product-image { overflow: hidden; } .product-card .product-image img, .product-card .product-image .pp-image { transition: transform .8s var(--pj-ease); } .product-card:hover .product-image img, .product-card:hover .product-image .pp-image { transform: scale(1.06); } /* ========================================================= 09. COLLECTION CARDS ========================================================= */ .category-card { overflow: hidden; transition: transform .5s var(--pj-ease), box-shadow .5s var(--pj-ease); } .category-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(40,0,20,.18); } .category-card img, .category-card .pp-image { transition: transform .8s var(--pj-ease); } .category-card:hover img, .category-card:hover .pp-image { transform: scale(1.08); } /* ========================================================= 10. GOLD RATE ========================================================= */ .rate-section { background: linear-gradient( 135deg, #f8e9ed, #fff8ef ) !important; } /* ========================================================= 11. PROMISE BLOCKS ========================================================= */ .promise { position: relative; transition: transform .45s var(--pj-ease), background .45s ease, box-shadow .45s ease; } .promise:hover { transform: translateY(-8px); background: rgba(255,255,255,.65); box-shadow: 0 25px 60px rgba(50,0,20,.10); } /* Promise image */ .promise-icon { overflow: hidden; transition: transform .45s var(--pj-ease), border-color .45s ease; } .promise:hover .promise-icon { transform: scale(1.08); border-color: var(--pj-gold); } /* ========================================================= 12. DIAMOND CARDS ========================================================= */ .diamond-card { overflow: hidden; border: 1px solid rgba(255,255,255,.12); transition: transform .55s var(--pj-ease), box-shadow .55s var(--pj-ease), border-color .55s ease; } .diamond-card:hover { transform: translateY(-10px); border-color: rgba(227,189,103,.65); box-shadow: 0 30px 80px rgba(0,0,0,.30); } .diamond-card-image { overflow: hidden; } .diamond-card-image img, .diamond-card-image .pp-image { transition: transform .8s var(--pj-ease); } .diamond-card:hover img, .diamond-card:hover .pp-image { transform: scale(1.07); } /* ========================================================= 13. LEAD / ENQUIRY SECTION ========================================================= */ .lead-image-block, .lead-form-block { transition: transform .5s var(--pj-ease), box-shadow .5s var(--pj-ease); } .lead-image-block:hover { transform: translateY(-5px); box-shadow: 0 25px 70px rgba(30,0,15,.18); } /* Form inputs */ .lead-form-block input, .lead-form-block select, .lead-form-block textarea { border: 1px solid rgba(67,5,31,.18) !important; transition: border-color .3s ease, box-shadow .3s ease; } .lead-form-block input:focus, .lead-form-block select:focus, .lead-form-block textarea:focus { border-color: var(--pj-gold) !important; box-shadow: 0 0 0 3px rgba(212,160,23,.12); outline: none; } /* ========================================================= 14. APPOINTMENT ========================================================= */ .appointment-copy { transition: background .5s ease; } .appointment-copy:hover { background: #fffaf0; } /* Appointment benefit icons */ .appointment-benefits b { transition: transform .35s ease, background .35s ease, color .35s ease; } .appointment-benefits span:hover b { transform: rotate(8deg) scale(1.08); background: var(--pj-gold); color: var(--pj-deep-maroon); } /* ========================================================= 15. JOURNAL / STORIES ========================================================= */ .journal-card { overflow: hidden; border-radius: var(--pj-card-radius); box-shadow: 0 10px 35px rgba(30,0,15,.06); transition: transform .55s var(--pj-ease), box-shadow .55s var(--pj-ease); } .journal-card:hover { transform: translateY(-10px); box-shadow: 0 30px 75px rgba(30,0,15,.16); } .journal-image { overflow: hidden; } .journal-image img, .journal-image .pp-image { transition: transform .8s var(--pj-ease); } .journal-card:hover img, .journal-card:hover .pp-image { transform: scale(1.07); } /* ========================================================= 16. CUSTOMER STORIES ========================================================= */ .customer-story-card { border-radius: var(--pj-card-radius); transition: transform .5s var(--pj-ease), box-shadow .5s var(--pj-ease); } .customer-story-card:hover { transform: translateY(-8px); box-shadow: 0 25px 70px rgba(30,0,15,.14); } 20. SECTION LAYOUT — WIDE ========================================================= */ /* Change this to 1200px / 1400px / 1600px */ .container, .pp-header-container, .pp-footer-container { max-width: var(--pj-content-width); } /* ========================================================= 21. MORE SPACE / AIRY DESIGN ========================================================= */ /* Uncomment these if you want a more spacious luxury layout. .section { padding-top: 140px; padding-bottom: 140px; } */ /* ========================================================= 22. COMPACT MODERN DESIGN ========================================================= */ /* Uncomment if you want a tighter editorial layout. .section { padding-top: 70px; padding-bottom: 70px; } */ /* ========================================================= 23. ROUND MODERN DESIGN ========================================================= */ /* Change the value above: --pj-card-radius: 18px; Or use: .product-card, .journal-card, .customer-story-card, .diamond-card { border-radius: 18px; } */ /* ========================================================= 24. IMAGE HOVER ========================================================= */ .product-image, .category-image, .diamond-card-image, .journal-image, .hero-frame, .lead-image-block, .appointment-image { overflow: hidden; } /* ========================================================= 25. REVEAL ANIMATION ========================================================= */ .reveal { transition: opacity .9s var(--pj-ease), transform .9s var(--pj-ease); } /* ========================================================= 26. REDUCE MOTION ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ========================================================= 27. MOBILE ========================================================= */ @media (max-width: 768px) { :root { --pj-section-space: 70px; } html { scroll-padding-top: 75px; } .section { padding-left: 20px; padding-right: 20px; } .hero { min-height: 650px; } .product-card:hover, .journal-card:hover, .diamond-card:hover, .customer-story-card:hover { transform: translateY(-4px); } } /* ========================================================= 28. EXTRA SMALL DEVICES ========================================================= */ @media (max-width: 480px) { :root { --pj-section-space: 55px; } .hero h1 { font-size: 45px; } } /* ========================================================= V7.1.1 REFERENCE-STYLE SECTION DESIGN Matches the supplied luxury jewellery reference layouts. Header/logo styles are intentionally untouched. ========================================================= */ /* ---------- SIGNATURE COLLECTION / PRODUCTS ---------- */ #product.section{ padding:58px 0 28px; background:#fbf6ee; } #product .split-heading{ grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:70px; align-items:end; margin:0 0 28px; } #product .split-heading h2{ max-width:760px; font-size:clamp(48px,5.1vw,76px); line-height:.96; color:#17202a; } #product .split-heading p{ max-width:520px; font-family:var(--serif); font-size:17px; line-height:1.55; color:#302b28; } #product .text-link{ margin-top:18px; font-size:17px; } #product .product-grid-eight{ grid-template-columns:1.35fr repeat(7,1fr); gap:12px; align-items:stretch; } #product .product-card{ border:1px solid #e2d5c5; border-radius:6px; background:#fffaf3; box-shadow:none; } #product .product-card:first-child{ grid-row:span 1; } #product .product-image{ height:225px; } #product .product-card:first-child .product-image{ height:245px; } #product .product-info{ min-height:78px; padding:12px 13px 14px; } #product .product-info h3{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.1; margin-bottom:9px; } #product .product-info a{ font-family:var(--serif); font-size:15px; letter-spacing:0; text-transform:none; font-weight:500; } #product .product-card:first-child:before{ content:"FEATURED"; position:absolute; z-index:2; margin:12px; padding:7px 12px; border:1px solid rgba(227,189,103,.8); border-radius:3px; background:#650d2f; color:#fff8ed; font-size:9px; letter-spacing:.18em; font-weight:700; } #product .product-card{position:relative} #product .section-rule{margin-top:22px} /* ---------- COLLECTION / CATEGORY SHOWCASE ---------- */ #about.category-section{ padding:38px 0 40px; background:#fbf6ee; } #about .center-heading{ margin-bottom:26px; } #about .center-heading h2{ font-size:clamp(50px,5.2vw,78px); line-height:.96; } #about .category-showcase{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:stretch; } #about .category-track{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; width:auto; animation:none; } #about .category-card{ width:auto; min-width:0; flex:none; padding:0 0 20px; border:1px solid #e2d5c5; border-radius:6px; background:#fffaf3; } #about .category-image{ height:270px; } #about .category-card h3{ margin:16px 8px 7px; font-size:17px; letter-spacing:.2em; } #about .category-card>span{ font-family:var(--serif); font-size:15px; letter-spacing:0; text-transform:none; font-weight:500; } #about .category-sidecopy{ position:relative; padding:28px 18px 25px 34px; border-left:1px solid #c9952e; display:flex; flex-direction:column; justify-content:center; background: linear-gradient(90deg,rgba(255,250,243,.8),rgba(255,250,243,.25)); } #about .category-sidecopy:after{ content:""; position:absolute; right:-8px; bottom:-15px; width:90px; height:150px; border:1px solid rgba(201,149,46,.22); border-left:0; border-radius:50%; transform:rotate(22deg); } .category-side-kicker{ color:#650d2f; font-size:10px; line-height:1.65; letter-spacing:.22em; font-weight:700; text-transform:uppercase; } #about .category-sidecopy h3{ position:relative; z-index:1; margin:20px 0 28px; color:#17202a; font:500 clamp(31px,2.5vw,47px)/1.04 var(--serif); } #about .category-sidecopy a{ position:relative; z-index:2; width:max-content; color:#650d2f; font:500 16px var(--serif); border-bottom:1px solid #c9952e; padding-bottom:5px; } /* ---------- APPOINTMENT REFERENCE ---------- */ #appointment.appointment-section{ padding:0; background:#f7ecee; } #appointment .appointment-grid{ width:100%; max-width:none; } #appointment .appointment-image{ min-height:620px; } #appointment .appointment-copy{ min-height:620px; padding:58px 65px; background:#f8e8ed; position:relative; } #appointment .appointment-copy:after{ content:""; position:absolute; right:0; bottom:0; width:220px; height:260px; border-left:1px solid rgba(101,13,47,.08); border-top:1px solid rgba(101,13,47,.08); border-radius:50% 0 0 0; } #appointment .appointment-copy h2{ font-size:clamp(52px,5.4vw,82px); } #appointment .appointment-copy>p:not(.eyebrow){ font-family:var(--serif); font-size:19px; color:#302b28; } #appointment .appointment-benefits{ grid-template-columns:repeat(4,1fr); gap:14px; margin:28px 0 35px; } #appointment .appointment-benefits span{ display:flex; flex-direction:column; text-align:center; gap:10px; font-family:var(--serif); font-size:11px; letter-spacing:.17em; line-height:1.55; } #appointment .appointment-benefits b{ width:72px; height:72px; margin:auto; font-size:28px; background:transparent; } #appointment .btn-maroon{ position:relative; z-index:2; align-self:center; min-width:66%; min-height:66px; font-family:var(--serif); font-size:18px; letter-spacing:0; text-transform:none; border-radius:6px; } /* ---------- JOURNAL REFERENCE ---------- */ #journal.journal-section{ padding:78px 0 46px; background:#fbf6ee; } #journal .journal-head{ grid-template-columns:1fr 300px; margin-bottom:32px; } #journal .journal-head h2{ font-size:clamp(55px,5.7vw,88px); line-height:.94; } #journal .journal-head p:last-child{ font-family:var(--serif); font-size:18px; color:#302b28; } #journal .journal-quote{ font-size:27px; } #journal .journal-showcase{ display:grid; grid-template-columns:minmax(0,1fr) 245px; gap:22px; align-items:stretch; } #journal .journal-grid-four{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } #journal .journal-card{ border:0; border-right:1px solid #d9c8b5; border-radius:0; background:transparent; } #journal .journal-image{ height:225px; border-radius:8px; overflow:hidden; } #journal .journal-copy{ padding:16px 14px 15px 0; } #journal .journal-copy>span{ display:inline-block; padding:6px 10px; border-radius:4px; background:#650d2f; color:#fff8ed; font-size:9px; letter-spacing:.15em; } #journal .journal-copy h3{ font-size:27px; margin:11px 0 8px; } #journal .journal-copy p{ font-family:var(--serif); font-size:15px; line-height:1.35; color:#302b28; } #journal .journal-copy>a{ font-family:var(--serif); font-size:15px; letter-spacing:.03em; text-transform:none; } #journal .journal-sidecopy{ border-left:1px solid #c9952e; padding:10px 0 10px 25px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(90deg,rgba(251,246,238,.2),rgba(251,246,238,.9)); } #journal .journal-side-quote{ color:#650d2f; font:italic 30px/1.05 var(--serif); margin-bottom:24px; } #journal .journal-sidecopy>span{ color:#6b5c50; font-size:9px; letter-spacing:.22em; line-height:1.9; } #journal .journal-sidecopy .btn{ margin-top:30px; min-height:58px; font-family:var(--serif); font-size:16px; letter-spacing:0; text-transform:none; } /* ---------- PROMISE REFERENCE ---------- */ #story.promise-section{ padding:72px 0 45px; background:#fbf6ee; } #story .promise-layout{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:0; align-items:stretch; } #story .promise-main{ padding-right:35px; } #story .center-heading{ text-align:left; max-width:none; margin:0 0 30px; } #story .center-heading h2{ font-size:clamp(54px,5.5vw,84px); line-height:.95; } #story .center-heading>p:last-child{ max-width:800px; margin:12px 0 0; font-family:var(--serif); font-size:18px; color:#302b28; } #story .promise-grid{ grid-template-columns:repeat(4,1fr); } #story .promise{ padding:22px 20px; } #story .promise-icon{ width:74px; height:74px; } #story .promise h3{ font-size:17px; line-height:1.4; } #story .promise p{ font-family:var(--serif); font-size:14px; line-height:1.45; } #story .promise-side{ position:relative; min-height:520px; overflow:hidden; background:#650d2f; } #story .promise-side>.pp-image, #story .promise-side>.image-placeholder{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } #story .promise-side:after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(48,3,17,.88) 0%,rgba(48,3,17,.42) 45%,rgba(48,3,17,.08) 100%); } #story .promise-side-overlay{ position:absolute; z-index:2; left:45px; top:65px; right:25px; color:#fff8ed; } #story .promise-side-overlay span{ display:block; font:italic 28px var(--serif); margin-bottom:5px; } #story .promise-side-overlay strong{ display:block; font:500 43px/1.02 var(--serif); } #story .promise-side-overlay small{ display:block; margin-top:38px; max-width:210px; color:#e3bd67; font-size:9px; letter-spacing:.2em; line-height:2.2; } /* ---------- LUXURY FOOTER REFERENCE ---------- */ .pp-site-footer{ background:#211b18 !important; color:#fff8ed; padding:0; } .pp-site-footer .pp-footer-row-one{ background:#211b18 !important; padding:62px 0 48px; } .pp-footer-luxury-grid{ width:min(1500px,calc(100% - 80px)); margin:0 auto; display:grid; grid-template-columns:1.25fr 1fr 1.1fr 1.25fr 1.05fr; gap:0; } .pp-footer-brand-block, .pp-footer-column{ min-height:350px; padding:0 30px; border-right:1px solid rgba(227,189,103,.4); } .pp-footer-brand-block{ padding-left:0; text-align:center; } .pp-footer-follow{ border-right:0; padding-right:0; } .pp-footer-logo{ display:block; margin:0 auto 12px; } .pp-footer-logo img, .pp-footer-logo .custom-logo{ max-width:190px !important; max-height:80px !important; width:auto !important; height:auto !important; object-fit:contain; margin:auto; } .pp-footer-brand-block h2{ margin:0; color:#e3bd67; font:500 37px var(--serif); letter-spacing:.14em; } .pp-footer-brand-block .pp-footer-tagline{ margin:15px 0 24px; color:#e3bd67 !important; font:italic 19px var(--serif) !important; } .pp-footer-brand-rule, .pp-footer-follow-rule{ width:105px; height:1px; background:#c9952e; margin:0 auto 25px; } .pp-footer-brand-block>span{ color:#fff8ed; font-size:9px; letter-spacing:.2em; } .pp-footer-column h4{ margin:0 0 23px; color:#e3bd67 !important; font:600 14px var(--serif) !important; letter-spacing:.2em; } .pp-footer-column a, .pp-footer-column p{ margin:0 0 12px; color:rgba(255,248,237,.78) !important; font-family:var(--serif); font-size:15px !important; line-height:1.45; } .pp-footer-contact-line{ display:grid !important; grid-template-columns:30px 1fr; gap:10px; align-items:start; } .pp-footer-contact-line b{ color:#e3bd67; font-size:24px; font-weight:400; } .pp-footer-social{ display:flex; gap:12px; margin:10px 0 32px; } .pp-footer-social a{ width:48px; height:48px; border:1px solid #e3bd67; border-radius:50%; display:grid !important; place-items:center; margin:0 !important; color:#e3bd67 !important; font-family:Arial,sans-serif !important; font-size:18px !important; } .pp-footer-follow-rule{ margin-left:0; } .pp-footer-follow-kicker{ display:block; color:#fff8ed; font:10px var(--serif); letter-spacing:.2em; margin-bottom:8px; } .pp-footer-follow>strong{ display:block; color:#fff8ed; font:18px var(--serif); margin-bottom:26px; } .pp-footer-whatsapp{ display:flex !important; align-items:center; justify-content:space-between; border:1px solid #e3bd67; border-radius:8px; padding:16px 18px; color:#fff8ed !important; font:13px var(--serif) !important; } .pp-footer-whatsapp b{color:#e3bd67;font-size:22px} .pp-site-footer .pp-footer-row-two{ background:#211b18 !important; border-top:1px solid rgba(227,189,103,.35); border-bottom:1px solid rgba(227,189,103,.35); padding:20px 0; } .pp-footer-trust{ width:min(1500px,calc(100% - 80px)); margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:0; } .pp-footer-trust>div{ display:flex; align-items:center; gap:18px; min-height:70px; padding:0 28px; border-right:1px solid rgba(227,189,103,.35); } .pp-footer-trust>div:first-child{padding-left:0} .pp-footer-trust>div:last-child{border-right:0} .pp-footer-trust>div>b{ color:#fff8ed; font:36px var(--serif); } .pp-footer-trust strong{ display:block; color:#e3bd67; font:10px var(--serif); letter-spacing:.2em; } .pp-footer-trust small{ display:block; margin-top:7px; color:rgba(255,248,237,.62); font:9px var(--serif); letter-spacing:.16em; } .pp-site-footer .pp-footer-row-three{ background:#211b18 !important; padding:18px 0 20px; } .pp-footer-bottom{ width:min(1500px,calc(100% - 80px)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:25px; color:rgba(255,248,237,.7); font-family:var(--serif); font-size:13px; } .pp-footer-bottom-links{ display:flex; gap:20px; } .pp-footer-bottom a{ display:inline !important; color:rgba(255,248,237,.75) !important; margin:0 !important; } /* ---------- V7.1.1 COMPACT COLLECTION FLOW ---------- */ @media(min-width:901px){ #product .split-heading h2{ max-width:760px; overflow-wrap:normal; } #product .product-info h3{ font-size:14px; letter-spacing:-.01em; } #product .product-info a{ font-size:14px; } #about .center-heading h2{ max-width:100%; } } /* ---------- REFERENCE RESPONSIVE ---------- */ @media(max-width:1200px){ #about .category-showcase{grid-template-columns:1fr} #about .category-sidecopy{border-left:0;border-top:1px solid #c9952e;padding:25px 0} #about .category-track{grid-template-columns:repeat(5,minmax(180px,1fr))} #story .promise-layout{grid-template-columns:1fr} #story .promise-main{padding-right:0} #story .promise-side{min-height:480px;margin-top:28px} .pp-footer-luxury-grid{grid-template-columns:repeat(3,1fr);gap:0} .pp-footer-brand-block{grid-column:1/-1;border-right:0;border-bottom:1px solid rgba(227,189,103,.35);min-height:auto;padding:0 0 35px;margin-bottom:35px} .pp-footer-column:nth-child(4){border-right:0} } @media(max-width:900px){ #product .split-heading{grid-template-columns:1fr;gap:15px} #product .product-grid-eight{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} #product .product-card:first-child{grid-column:auto} #about .category-track{grid-template-columns:repeat(3,minmax(0,1fr))} #appointment .appointment-benefits{grid-template-columns:repeat(2,1fr)} #journal .journal-showcase{grid-template-columns:1fr} #journal .journal-grid-four{grid-template-columns:repeat(2,1fr)} #journal .journal-sidecopy{border-left:0;border-top:1px solid #c9952e;padding:28px 0} .pp-footer-luxury-grid{grid-template-columns:1fr 1fr} .pp-footer-column{border-right:0;border-bottom:1px solid rgba(227,189,103,.3);padding:30px 15px;min-height:auto} .pp-footer-brand-block{grid-column:1/-1} .pp-footer-trust{grid-template-columns:repeat(2,1fr)} .pp-footer-trust>div:nth-child(2){border-right:0} .pp-footer-trust>div:nth-child(3){border-top:1px solid rgba(227,189,103,.35)} .pp-footer-trust>div:nth-child(4){border-top:1px solid rgba(227,189,103,.35);border-right:0} } @media(max-width:600px){ #product .product-grid-eight{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #product .product-card:first-child{grid-column:auto} #product .product-image, #product .product-card:first-child .product-image{height:210px} #product .product-info{min-height:80px;padding:12px} #product .product-info h3{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip} #about .category-track{grid-template-columns:repeat(2,minmax(0,1fr))} #about .category-image{height:220px} #about .category-card h3{font-size:14px} #appointment .appointment-image, #appointment .appointment-copy{min-height:auto} #appointment .appointment-image{height:420px} #appointment .appointment-copy{padding:40px 22px} #appointment .appointment-benefits{grid-template-columns:repeat(2,1fr)} #appointment .btn-maroon{min-width:100%} #journal .journal-grid-four{grid-template-columns:1fr 1fr;gap:8px} #journal .journal-image{height:190px} #journal .journal-copy{padding:11px 8px 14px 0} #journal .journal-copy h3{font-size:20px} #journal .journal-copy p{font-size:13px} #story .promise-grid{grid-template-columns:1fr 1fr} #story .promise{padding:18px 10px} #story .promise h3{font-size:14px} #story .promise p{font-size:12px} #story .promise-side{min-height:390px} .pp-footer-luxury-grid{width:calc(100% - 30px);grid-template-columns:1fr} .pp-footer-column{padding:26px 0} .pp-footer-trust{width:calc(100% - 30px);grid-template-columns:1fr} .pp-footer-trust>div{border-right:0!important;border-bottom:1px solid rgba(227,189,103,.3);padding:15px 0} .pp-footer-trust>div:last-child{border-bottom:0} .pp-footer-bottom{width:calc(100% - 30px);flex-direction:column;align-items:flex-start} .pp-footer-bottom-links{flex-wrap:wrap} } /* ========================================================= JEWELLERY LANDING PAGE — FULLY EDITABLE FOOTER REFERENCE LAYOUT ========================================================= */ .pp-footer-trust{grid-template-columns:repeat(4,1fr)!important;gap:0!important;width:min(1500px,calc(100% - 80px));margin:0 auto;} .pp-footer-trust-item{padding:4px 30px;min-height:72px;} .pp-footer-trust-item:not(:last-child){border-right:1px solid rgba(227,189,103,.35);} .pp-footer-trust-item b{font-size:28px!important;} .pp-footer-trust-item strong{display:block;} .pp-footer-trust-item small{display:block;margin-top:5px;} .pp-footer-bottom{width:min(1500px,calc(100% - 80px));margin:0 auto;} @media(max-width:900px){.pp-footer-trust{grid-template-columns:repeat(2,1fr)!important;width:calc(100% - 30px);}.pp-footer-trust-item:nth-child(2){border-right:0}.pp-footer-trust-item:nth-child(3),.pp-footer-trust-item:nth-child(4){border-top:1px solid rgba(227,189,103,.35);}} @media(max-width:600px){.pp-footer-trust{grid-template-columns:1fr!important;}.pp-footer-trust-item{border-right:0!important;border-bottom:1px solid rgba(227,189,103,.3);}.pp-footer-trust-item:last-child{border-bottom:0;}.pp-footer-bottom{width:calc(100% - 30px);}} /* ========================================================= V7.1.1 — COLLECTION RESPONSIVE / CATEGORY LOOP FIX ========================================================= */ /* SECTION 3 — SIGNATURE COLLECTION Desktop: 8 in one row Laptop / tablet: 4 x 2 Mobile: 2 x 4 */ @media (max-width: 1200px) and (min-width: 601px){ #product .product-grid-eight{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; } #product .product-image, #product .product-card:first-child .product-image{ height:260px !important; } #product .product-info{ min-height:88px !important; } #product .product-info h3{ font-size:16px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } } @media (max-width: 600px){ #product .product-grid-eight{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } #product .product-info h3{ font-size:15px !important; } } /* SECTION 4 — COLLECTION CAROUSEL Only 5 unique categories, duplicated in the track solely to create a seamless continuous loop. */ #about .category-marquee{ display:block !important; overflow:hidden !important; width:100% !important; margin:0 !important; padding:0 !important; } #about .category-track{ display:flex !important; flex-wrap:nowrap !important; width:calc(200% + 14px) !important; gap:14px !important; animation:ppCategoryLoop 32s linear infinite !important; } #about .category-card{ width:calc((50% - 56px) / 5) !important; min-width:0 !important; flex:0 0 calc((50% - 56px) / 5) !important; } #about .category-card-duplicate{ display:block !important; } #about .category-image{ height:270px !important; } #about .category-card h3{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #about .category-marquee:hover .category-track{ animation-play-state:paused !important; } @keyframes ppCategoryLoop{ from{transform:translateX(0)} to{transform:translateX(calc(-50% + 7px))} } /* Laptop / tablet: keep the five-category carousel horizontal. */ @media (max-width:1200px){ #about .category-showcase{ grid-template-columns:1fr !important; gap:24px !important; } #about .category-marquee{ width:100% !important; } #about .category-track{ gap:12px !important; animation-duration:28s !important; } #about .category-card{ flex:0 0 190px !important; width:190px !important; } #about .category-image{ height:235px !important; } #about .category-sidecopy{ border-left:0 !important; border-top:1px solid #c9952e !important; padding:25px 0 !important; } } /* Mobile: two-category view while the five unique categories keep looping. */ @media (max-width:600px){ #about .category-track{ gap:10px !important; animation-duration:24s !important; } #about .category-card{ flex:0 0 calc((100vw - 42px) / 2) !important; width:calc((100vw - 42px) / 2) !important; } #about .category-image{ height:210px !important; } #about .category-card h3{ font-size:14px !important; } } /* V7.1.1 — SIGNATURE COLLECTION CARD ALIGNMENT */ #product .product-grid-eight{align-items:stretch !important;} #product .product-card{min-width:0 !important;display:flex !important;flex-direction:column !important;} #product .product-card .product-image{flex:0 0 auto !important;} #product .product-info{display:flex !important;flex:1 1 auto !important;flex-direction:column !important;min-width:0 !important;min-height:92px !important;padding:16px 14px 14px !important;overflow:hidden !important;box-sizing:border-box !important;} #product .product-info > div{display:flex !important;flex:1 1 auto !important;flex-direction:column !important;min-width:0 !important;width:100% !important;} #product .product-info h3{display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;line-clamp:2 !important;min-height:2.36em !important;max-height:2.36em !important;margin:0 0 8px !important;overflow:hidden !important;white-space:normal !important;text-overflow:clip !important;overflow-wrap:normal !important;word-break:normal !important;hyphens:none !important;line-height:1.18 !important;} #product .product-info a{display:block !important;flex:0 0 auto !important;margin-top:auto !important;white-space:nowrap !important;line-height:1.25 !important;} @media (min-width:1201px){#product .product-info h3{font-size:clamp(13px,1vw,16px) !important;}} @media (max-width:1200px) and (min-width:601px){#product .product-info h3{font-size:14px !important;}} @media (max-width:600px){#product .product-info{min-height:88px !important;padding:13px 12px 12px !important;}#product .product-info h3{font-size:14px !important;min-height:0 !important;max-height:2.36em !important;}} /* V7.1.1 — CATEGORY CAROUSEL / NATURAL IMAGE FIX Five unique category cards. Images retain natural aspect ratio, while card widths stay controlled so uploaded image dimensions cannot change the carousel layout. */ #about .category-marquee{ display:block !important; overflow:hidden !important; width:100% !important; margin:0 !important; padding:0 !important; scrollbar-width:none !important; -ms-overflow-style:none !important; } #about .category-marquee::-webkit-scrollbar{display:none !important;} #about .category-track{ display:flex !important; flex-wrap:nowrap !important; width:200% !important; min-width:0 !important; gap:14px !important; animation:none !important; transform:none !important; will-change:transform; } #about .category-card{ display:block !important; visibility:visible !important; opacity:1 !important; flex:0 0 calc((50% - 56px) / 5) !important; width:calc((50% - 56px) / 5) !important; min-width:0 !important; max-width:none !important; box-sizing:border-box !important; } #about .category-image{ display:block !important; width:100% !important; height:auto !important; min-height:0 !important; aspect-ratio:auto !important; overflow:hidden !important; background:#f5eee5; } #about .category-image .pp-image{ display:block !important; width:100% !important; height:auto !important; max-width:100% !important; object-fit:contain !important; } #about .category-card h3{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #about .category-marquee:hover .category-track{animation-play-state:paused !important;} /* Laptop / tablet: four category cards visible. */ @media (max-width:1200px) and (min-width:601px){ #about .category-showcase{ grid-template-columns:1fr !important; gap:24px !important; } #about .category-track{width:200% !important;} #about .category-card{ flex-basis:calc((50% - 36px) / 5) !important; width:calc((50% - 36px) / 5) !important; } #about .category-sidecopy{ border-left:0 !important; border-top:1px solid #c9952e !important; padding:25px 0 !important; } } /* Mobile: two category cards visible. */ @media (max-width:600px){ #about .category-track{width:max-content !important;gap:10px !important;} #about .category-card{ flex:0 0 calc((100vw - 42px - 10px) / 2) !important; width:calc((100vw - 42px - 10px) / 2) !important; } #about .category-card h3{font-size:14px !important;} } /* popupbysurya image and category interaction */ #about .category-card > a.category-image{display:block;color:inherit;text-decoration:none;margin:0;} #about .category-card > a:last-child{font-family:var(--serif);font-size:15px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--maroon-deep);text-decoration:none;margin-left:8px;} .pbs-popup-image,.pbs-lightbox img,.product-image img,.category-image img,.journal-image img,.customer-story-image img{cursor:zoom-in;} .pbs-modal .pbs-button{cursor:pointer;} /* ========================================================= XARVA MEDIA — CLIENT LOGO VISIBILITY + SIZE Built into Jewellery Landing Page v3.0 Client-specific visual corrections can be added from: Appearance → Customize → Client Custom CSS ========================================================= */ /* Header main row */ .pp-header-main { position: relative !important; overflow: visible !important; z-index: 100 !important; } /* Logo column */ .pp-logo-col { position: relative !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } /* Logo wrapper */ .pp-logo-col .pp-header-logo { position: relative !important; z-index: 10000 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 190px !important; height: 64px !important; max-width: 190px !important; max-height: 64px !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Actual logo */ .pp-logo-col .pp-header-logo img, .pp-logo-col .pp-header-logo .custom-logo, .pp-logo-col .pp-header-logo-image, .pp-logo-col .brand-logo { position: relative !important; z-index: 10001 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; object-fit: contain !important; object-position: center center !important; transform: none !important; } /* Mobile */ @media (max-width: 700px) { .pp-header-main { overflow: visible !important; } .pp-logo-col { z-index: 9999 !important; } .pp-logo-col .pp-header-logo { width: 150px !important; height: 52px !important; max-width: 150px !important; max-height: 52px !important; z-index: 10000 !important; } .pp-logo-col .pp-header-logo img, .pp-logo-col .pp-header-logo .custom-logo, .pp-logo-col .pp-header-logo-image, .pp-logo-col .brand-logo { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } } /* ========================================================= EMBEDDED GOLD RATE ENGINE — Jewellery Landing Page ========================================================= */ .pjgr-wrap{ --pjgr-gold:#c9a227; --pjgr-gold-light:#e3bd67; --pjgr-maroon:#6a0d32; --pjgr-maroon-dark:#300311; --pjgr-bg:#faf5eb; --pjgr-surface:#fffdf8; --pjgr-ink:#2b2320; --pjgr-muted:#756b64; max-width:1180px; margin:0 auto; color:var(--pjgr-ink); } .pjgr-title{ margin:0 0 6px; text-align:center; color:var(--pjgr-maroon); font-family:Georgia,"Times New Roman",serif; font-size:clamp(26px,3vw,40px); font-weight:500; } .pjgr-updated{ margin:0 0 28px; text-align:center; color:var(--pjgr-muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; } .pjgr-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .pjgr-rate-card{ background:var(--pjgr-surface); border:1px solid rgba(106,13,50,.13); padding:24px 18px; text-align:center; box-shadow:0 12px 30px rgba(48,3,17,.06); transition:transform .2s ease,box-shadow .2s ease; } .pjgr-rate-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(48,3,17,.1)} .pjgr-rate-card h3{ margin:0 0 12px; color:var(--pjgr-maroon); font-family:Georgia,"Times New Roman",serif; font-size:18px; font-weight:500; } .pjgr-rate{font-size:28px;line-height:1.15;font-weight:600;color:var(--pjgr-ink)} .pjgr-unit{margin-top:6px;color:var(--pjgr-muted);font-size:11px;letter-spacing:.05em} .pjgr-history{margin-top:28px;background:var(--pjgr-surface);border:1px solid rgba(106,13,50,.12);padding:22px;box-shadow:0 12px 30px rgba(48,3,17,.04)} .pjgr-history h3{margin:0 0 14px;color:var(--pjgr-maroon);font:500 21px Georgia,"Times New Roman",serif} .pjgr-history-scroll{overflow-x:auto} .pjgr-history-table{width:100%;border-collapse:collapse;font-size:12px} .pjgr-history-table th{padding:11px 12px;background:var(--pjgr-maroon);color:#fff;text-align:left;letter-spacing:.08em;font-size:10px} .pjgr-history-table td{padding:11px 12px;border-bottom:1px solid rgba(106,13,50,.1);background:#fff} .pjgr-history-table tr:last-child td{border-bottom:0} .pjgr-change-up{color:#137a55;font-weight:600}.pjgr-change-down{color:#b42318;font-weight:600}.pjgr-change-flat,.pjgr-muted{color:var(--pjgr-muted)} .pjgr-up{color:#137a55;font-weight:600}.pjgr-down{color:#b42318;font-weight:600}.pjgr-flat{color:var(--pjgr-muted);font-weight:600} .pjgr-note{margin-top:18px;color:var(--pjgr-muted);font-size:11px;line-height:1.7;text-align:center} .pjgr-simple-rate{font-size:inherit}.pjgr-simple-rate strong{color:var(--pjgr-maroon)}.pjgr-simple-rate-date{color:var(--pjgr-muted);font-size:.9em} @media(max-width:1000px){.pjgr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.pjgr-grid{grid-template-columns:1fr}.pjgr-rate-card{padding:20px 16px}.pjgr-rate{font-size:25px}.pjgr-history{padding:16px}.pjgr-history-table{min-width:520px}} /* ========================================================= JEWELLERY LANDING PAGE — FAQ / TOP 10 Q&A ========================================================= */ .jlp-faq-section{background:#faf5eb} .jlp-faq-list{max-width:900px;margin:42px auto 0;border-top:1px solid rgba(48,3,17,.16)} .jlp-faq-item{border-bottom:1px solid rgba(48,3,17,.16);background:transparent} .jlp-faq-item summary{list-style:none;display:grid;grid-template-columns:48px 1fr 32px;gap:18px;align-items:center;padding:22px 4px;cursor:pointer} .jlp-faq-item summary::-webkit-details-marker{display:none} .jlp-faq-number{font-size:10px;letter-spacing:.16em;color:#8b6a42} .jlp-faq-question{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.45;color:#300311} .jlp-faq-icon{font-size:22px;font-weight:300;color:#8b6a42;text-align:center;transition:transform .25s ease} .jlp-faq-item[open] .jlp-faq-icon{transform:rotate(45deg)} .jlp-faq-answer{padding:0 54px 24px 66px;color:#5f5650;font-size:13px;line-height:1.85} .jlp-faq-answer a{color:#7b1738;text-decoration:underline;text-underline-offset:2px} @media(max-width:700px){ .jlp-faq-item summary{grid-template-columns:32px 1fr 26px;gap:10px;padding:18px 0} .jlp-faq-question{font-size:16px} .jlp-faq-answer{padding:0 36px 20px 42px;font-size:12px} } /* V7.1.1 — hard mobile viewport containment Prevent any section/grid/positioned child from creating a page-wide horizontal scroll area on mobile. Internal carousels keep their own scroll. */ @media (max-width: 700px){ html{ width:100% !important; max-width:100% !important; overflow-x:clip !important; } body{ width:100% !important; min-width:0 !important; max-width:100% !important; overflow-x:clip !important; position:relative !important; } main, main > section, .hero, .section, .maroon-section, .cream-section, .category-section, .diamond-section, .lead-section, .appointment-section, .journal-section{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } main{ display:block !important; overflow-x:clip !important; } .hero-grid, .container, .wide-container{ width:calc(100% - 30px) !important; max-width:700px !important; min-width:0 !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } .hero-grid{ grid-template-columns:minmax(0,1fr) !important; } .hero-copy, .hero-art, .hero-frame, .hero-frame img, .hero-art img{ min-width:0 !important; max-width:100% !important; } /* Only the category marquee is allowed to have its own horizontal scroll. */ #about .category-marquee{ max-width:100% !important; overflow-x:auto !important; overflow-y:hidden !important; } #about .category-track{ max-width:none !important; } .pp-luxury-header, .pp-site-footer, .pp-header-row, .pp-footer-row{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } .pp-header-container, .pp-footer-container, .pp-footer-luxury-grid, .pp-footer-trust, .pp-footer-bottom{ max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } img, video, iframe, svg{ max-width:100%; } } /* ========================================================= V7.1.1 — RESPONSIVE MEDIA + PERFORMANCE LAYER Images keep their natural aspect ratio. Containers adapt to the available width instead of forcing crop/letterbox behavior. ========================================================= */ .pp-image{ display:block; width:100%; height:auto !important; max-width:100%; object-fit:contain !important; object-position:center center; } .image-placeholder{ width:100%; height:auto; min-height:180px; box-sizing:border-box; } .hero-art{min-height:0;} .hero-frame{ width:min(560px,100%); height:auto !important; min-height:0; box-sizing:border-box; overflow:hidden; } .hero-frame .pp-image{height:auto !important;max-height:none;} .product-grid-eight{align-items:start;} .product-card{height:auto;min-height:0;} .product-image{ height:auto !important; min-height:0 !important; aspect-ratio:auto !important; background:transparent; overflow:hidden; } .product-image .pp-image{height:auto !important;min-height:0;object-fit:contain !important;} .product-info{min-height:0 !important;} .category-image{ height:auto !important; min-height:0 !important; aspect-ratio:auto !important; background:transparent; } .category-image .pp-image{height:auto !important;object-fit:contain !important;} .diamond-card-image{ height:auto !important; min-height:0 !important; background:transparent; } .diamond-card-image .pp-image{height:auto !important;object-fit:contain !important;} .lead-inner{align-items:start;} .lead-image-block{ min-height:0 !important; height:auto; overflow:hidden; } .lead-image-block .pp-image, .lead-image-block .image-placeholder{ height:auto !important; min-height:0 !important; object-fit:contain !important; } .appointment-grid{align-items:start;} .appointment-image{ min-height:0 !important; height:auto; overflow:hidden; } .appointment-image .pp-image, .appointment-image .image-placeholder{ height:auto !important; min-height:0 !important; object-fit:contain !important; } .journal-image{ height:auto !important; min-height:0 !important; aspect-ratio:auto !important; background:transparent; } .journal-image .pp-image, .journal-image .image-placeholder{ height:auto !important; min-height:0 !important; object-fit:contain !important; } .customer-story-image{ height:auto !important; min-height:0 !important; aspect-ratio:auto !important; background:transparent; } .customer-story-image .pp-image, .customer-story-image .image-placeholder{ height:auto !important; min-height:0 !important; object-fit:contain !important; } #story .promise-side{ min-height:0 !important; height:auto; } #story .promise-side>.pp-image, #story .promise-side>.image-placeholder{ position:relative !important; inset:auto !important; width:100%; height:auto !important; min-height:0 !important; object-fit:contain !important; display:block; } #story .promise-side-overlay{top:65px;} @media(max-width:700px){ .hero-frame{width:100%;padding:7px;} .hero-art{width:100%;} .product-grid-eight,.diamond-four-grid,.journal-grid-four,.customer-stories-grid{align-items:start;} .product-image,.category-image,.diamond-card-image,.journal-image,.customer-story-image{height:auto !important;} #appointment .appointment-image{height:auto !important;} #story .promise-side{height:auto !important;min-height:0 !important;} #story .promise-side-overlay{top:28px;left:25px;right:20px;} } /* V7.1.1 — 404 page */ .pp-404-page{min-height:70vh;display:grid;place-items:center;padding:110px 24px;background:var(--cream);text-align:center} .pp-404-inner{width:min(760px,100%);padding:70px 30px;border:1px solid var(--border);background:rgba(255,255,255,.5);box-shadow:var(--shadow)} .pp-404-inner h1{margin:0;color:var(--maroon);font:500 clamp(48px,7vw,88px)/.95 var(--serif);letter-spacing:-.035em} .pp-404-inner h1 em{color:var(--gold);font-style:italic} .pp-404-inner>p:not(.eyebrow){max-width:560px;margin:25px auto 30px;color:var(--muted);font-size:14px} .pp-cookie-notice{position:fixed;left:20px;right:20px;bottom:20px;z-index:10000;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:18px 22px;background:rgba(33,27,24,.97);color:#fffaf3;border:1px solid rgba(227,189,103,.45);box-shadow:0 15px 45px rgba(0,0,0,.24)} .pp-cookie-notice[hidden]{display:none} .pp-cookie-copy p{margin:0;font-size:12px;line-height:1.55} .pp-cookie-links{display:flex;gap:18px;margin-top:7px} .pp-cookie-links a{color:var(--gold-light);font-size:10px;text-transform:uppercase;letter-spacing:.1em} .pp-cookie-accept{border:1px solid var(--gold-light);background:var(--gold);color:#211b18;padding:10px 20px;cursor:pointer;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:10px;white-space:nowrap} @media(max-width:700px){ .pp-cookie-notice{left:12px;right:12px;bottom:12px;align-items:flex-start;flex-direction:column;gap:14px} .pp-cookie-accept{width:100%} .pp-404-page{padding:70px 18px} }