/* Theme Name: Pool Tile Pallets Theme URI: https://pooltilepallets.com Author: Pool Tile Pallets Description: Single-page storefront for selling pool tile by the full pallet at one delivered price. Order requests and questions are emailed to the address set in functions.php. Version: 1.8.0 Requires at least: 5.8 Requires PHP: 7.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: pooltilepallets */ /* ========================================================================== All site styling lives below. The five colour themes (Harbor, Fresh, Jobsite, Coastal Luxe, Mono) are driven by a data-theme attribute on ; set the launch default in functions.php via PTP_DEFAULT_THEME. ========================================================================== */ :root{ --navy:#0b2740; --navy2:#123a5c; --aqua:#1996b3; --amber:#f59e0b; --amber-dk:#d97706; --ink:#1a2733; --mut:#5b6b7a; --line:#dde5ec; --bg:#f7fafc; --ok:#16a34a; } *{margin:0;padding:0;box-sizing:border-box;} body{font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;} a{color:var(--aqua);text-decoration:none;} button{font-family:inherit;} .wrap{max-width:1180px;margin:0 auto;padding:0 24px;} header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;} .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;flex-wrap:wrap;} .logo{cursor:pointer;} .logo-txt{font-size:23px;font-weight:800;letter-spacing:-.5px;color:var(--navy);} .logo-txt span{color:var(--aqua);} .logo-sub{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);} nav{display:flex;gap:22px;font-size:14.5px;font-weight:600;flex-wrap:wrap;align-items:center;} nav a{color:var(--ink);cursor:pointer;} nav a:hover{color:var(--aqua);} .hbtns{display:flex;gap:10px;align-items:center;} .qbtn{background:#fff;border:1.5px solid var(--line);color:var(--navy);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:8px;cursor:pointer;} .qbtn:hover{border-color:var(--aqua);color:var(--aqua);} .cartbtn{background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:8px;cursor:pointer;border:none;display:flex;align-items:center;gap:8px;} .cartbtn:hover{background:var(--aqua);} .ccount{background:var(--amber);color:#20242b;border-radius:10px;padding:0 7px;font-size:12px;font-weight:800;min-width:20px;text-align:center;} /* landing */ .landing-hero{background:linear-gradient(150deg,var(--navy) 0%,var(--navy2) 60%,#155e7d 100%);color:#fff;padding:52px 0 44px;text-align:center;} .landing-hero h1{font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-1px;max-width:800px;margin:0 auto 14px;} .landing-hero h1 em{font-style:normal;color:#ffd27a;} .landing-hero p{font-size:16.5px;color:#c8dcea;max-width:620px;margin:0 auto;} .split{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:44px 0 12px;} .cat{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:box-shadow .15s, transform .15s;} .cat:hover{box-shadow:0 14px 40px rgba(11,39,64,.14);transform:translateY(-3px);} .cat .ph{height:320px;background:repeating-linear-gradient(45deg,#eef2f5,#eef2f5 14px,#e4eaef 14px,#e4eaef 28px);display:flex;align-items:center;justify-content:center;color:#8a99a6;font-weight:700;font-size:15px;border-bottom:1px solid var(--line);text-align:center;padding:20px;} .cat .cb{padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px;} .cat h2{font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--navy);} .cat .cd{font-size:13.5px;color:var(--mut);margin-top:3px;} .cat .go{background:var(--amber);color:#20242b;font-weight:800;font-size:15px;border-radius:8px;padding:12px 20px;white-space:nowrap;} .trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px;} .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);} .titem{padding:20px 16px;text-align:center;border-left:1px solid var(--line);} .titem:first-child{border-left:none;} .titem .t1{font-weight:700;font-size:14.5px;color:var(--navy);} .titem .t2{font-size:12.5px;color:var(--mut);} section{padding:44px 0;} .backlink{font-size:13.5px;font-weight:700;cursor:pointer;color:var(--aqua);} h2.sec{font-size:30px;font-weight:800;letter-spacing:-.5px;color:var(--navy);margin-top:6px;} .sec-sub{color:var(--mut);font-size:15px;margin:8px 0 30px;max-width:760px;} .series{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:26px;overflow:hidden;} .shead{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--line);} .shead h3{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.3px;} .sspec{font-size:13px;color:var(--mut);margin-top:2px;} .price{font-size:25px;font-weight:800;color:var(--navy);letter-spacing:-.5px;white-space:nowrap;} .price small{font-size:12.5px;font-weight:600;color:var(--mut);letter-spacing:0;} .delivered{display:inline-block;font-size:11px;font-weight:700;color:var(--ok);background:#eafaf0;border-radius:4px;padding:2px 8px;margin-left:7px;vertical-align:middle;} .smeta{font-size:12px;color:var(--mut);text-align:right;} .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;} .pt{padding:16px;border-left:1px solid var(--line);border-top:1px solid var(--line);margin-left:-1px;margin-top:-1px;display:flex;flex-direction:column;} .imgbox{position:relative;width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#eef2f5;} .imgbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease;} .imgbox img.profile{opacity:0;} .imgbox:hover img.profile{opacity:1;} .imgbox:hover img.topimg.hasprof{opacity:0;} .pn{font-size:14px;font-weight:700;color:var(--navy);margin-top:10px;line-height:1.3;} .addrow{display:flex;gap:8px;margin-top:10px;align-items:stretch;} .qty{display:flex;border:1.5px solid var(--line);border-radius:7px;overflow:hidden;} .qty button{width:28px;background:#f2f6f9;border:none;font-size:15px;font-weight:800;color:var(--navy);cursor:pointer;} .qty button:hover{background:#e4ecf2;} .qty input{width:38px;border:none;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);outline:none;} .addbtn{flex:1;background:var(--navy);color:#fff;font-weight:700;font-size:13px;padding:9px 6px;border-radius:7px;border:none;cursor:pointer;} .addbtn:hover{background:var(--aqua);} .addbtn.added{background:var(--ok);} .qtylbl{font-size:10.5px;color:var(--mut);margin-top:5px;} .fband{background:var(--navy);color:#fff;} .fband .wrap{padding:42px 24px;text-align:center;} .fband h3{font-size:26px;font-weight:800;letter-spacing:-.5px;} .fband h3 span{color:#ffd27a;} .fband p.lead{font-size:15px;color:#c8dcea;max-width:680px;margin:10px auto 26px;} .fpoints{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto;text-align:left;} .fpoint{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:18px 20px;} .fpoint b{display:block;font-size:15px;margin-bottom:5px;color:#fff;} .fpoint p{font-size:13px;color:#b9cedd;} .faq details{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 20px;margin-bottom:10px;} .faq summary{font-weight:700;font-size:14.5px;color:var(--navy);cursor:pointer;} .faq details p{font-size:13.5px;color:var(--mut);margin-top:8px;} footer{background:var(--navy);color:#9db8cb;padding:34px 0 24px;font-size:13px;} footer .wrap{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;} .fineprint{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:14px;font-size:11.5px;color:#6f8ba0;} /* modals */ .overlay{position:fixed;inset:0;background:rgba(11,39,64,.55);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:30px 16px;overflow-y:auto;} .overlay.open{display:flex;} .modal{background:#fff;border-radius:14px;max-width:640px;width:100%;padding:28px;position:relative;} .mclose{position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;color:var(--mut);cursor:pointer;} .modal h3{font-size:21px;font-weight:800;color:var(--navy);margin-bottom:4px;} .msub{font-size:13px;color:var(--mut);margin-bottom:18px;} .cartlist{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:8px;} .crow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:13.5px;} .crow:first-child{border-top:none;} .crow img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:none;} .crow .ci{flex:1;min-width:0;} .crow .ci b{display:block;color:var(--navy);font-size:13.5px;} .crow .ci span{font-size:12px;color:var(--mut);} .crow .cq{font-weight:700;white-space:nowrap;} .crow .cp{font-weight:800;color:var(--navy);white-space:nowrap;} .crow .rm{background:none;border:none;color:#c33;font-size:16px;cursor:pointer;padding:2px 6px;} .ctotal{display:flex;justify-content:space-between;font-size:15px;font-weight:800;color:var(--navy);padding:10px 4px 16px;} .ctotal small{font-weight:600;color:var(--mut);font-size:11.5px;display:block;} .fld{margin-bottom:12px;} .fld label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:4px;} .fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;outline:none;} .fld input:focus,.fld textarea:focus{border-color:var(--aqua);} .chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin:14px 0 18px;} .chk input{margin-top:3px;width:16px;height:16px;} .chk b{color:var(--navy);} .chk .note{font-size:12px;color:var(--mut);} .submitbtn{width:100%;background:var(--amber);color:#20242b;font-weight:800;font-size:15.5px;padding:14px;border:none;border-radius:9px;cursor:pointer;} .submitbtn:hover{background:var(--amber-dk);color:#fff;} .success{text-align:center;padding:30px 10px;} .success .big{font-size:40px;} .success h4{font-size:19px;color:var(--navy);margin:10px 0 6px;} .success p{font-size:13.5px;color:var(--mut);} .empty{padding:26px;text-align:center;color:var(--mut);font-size:14px;} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--navy);color:#fff;font-size:13.5px;font-weight:700;padding:11px 20px;border-radius:9px;transition:transform .25s;z-index:120;} .toast.show{transform:translateX(-50%) translateY(0);} .view{display:none;} .view.active{display:block;} @media(max-width:980px){ .pgrid{grid-template-columns:repeat(3,1fr);} .split{grid-template-columns:1fr;} .trust .wrap{grid-template-columns:repeat(2,1fr);} .titem{border-left:none;border-top:1px solid var(--line);} .fpoints{grid-template-columns:1fr;} .landing-hero h1{font-size:30px;} } @media(max-width:600px){ .pgrid{grid-template-columns:repeat(2,1fr);} } /* ================= THEME SWITCHER (mockup tool) ================= */ .themes{position:fixed;bottom:18px;left:18px;z-index:200;background:#111;border-radius:12px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.35);display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:92vw;} .themes .tl{color:#888;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-right:2px;} .tchip{border:1.5px solid #444;background:#1c1c1c;color:#ddd;font-size:12px;font-weight:700;padding:6px 12px;border-radius:16px;cursor:pointer;} .tchip:hover{border-color:#888;} .tchip.on{background:#fff;color:#111;border-color:#fff;} /* ================= THEME: FRESH (light & airy) ================= */ body[data-theme=fresh]{--navy:#0d5c8c;--navy2:#1178b5;--aqua:#0e9fc4;--amber:#ffb703;--amber-dk:#e09b00;--bg:#f5fafd;--line:#dbe9f2;} body[data-theme=fresh] .landing-hero{background:linear-gradient(150deg,#0d5c8c 0%,#1284bd 55%,#19a0c9 100%);} body[data-theme=fresh] .cat,body[data-theme=fresh] .series,body[data-theme=fresh] .modal{border-radius:20px;} body[data-theme=fresh] .imgbox{border-radius:12px;} body[data-theme=fresh] .addbtn,body[data-theme=fresh] .cartbtn,body[data-theme=fresh] .qbtn,body[data-theme=fresh] .go,body[data-theme=fresh] .submitbtn{border-radius:24px;} body[data-theme=fresh] .fband{background:linear-gradient(120deg,#0d5c8c,#1596c9);} body[data-theme=fresh] footer{background:#0d3a57;} /* ================= THEME: JOBSITE (dark industrial) ================= */ body[data-theme=jobsite]{--navy:#f2f4f6;--navy2:#2a2e33;--aqua:#ff9d42;--amber:#ff7a00;--amber-dk:#e56d00;--bg:#141619;--ink:#e8eaed;--mut:#9aa4ad;--line:#2c3238;color:#e8eaed;} body[data-theme=jobsite] header,body[data-theme=jobsite] .cat,body[data-theme=jobsite] .series,body[data-theme=jobsite] .modal,body[data-theme=jobsite] .faq details,body[data-theme=jobsite] .trust{background:#1d2024;} body[data-theme=jobsite] .qty input{background:#1d2024;color:#e8eaed;} body[data-theme=jobsite] .qty button{background:#262b30;color:#e8eaed;} body[data-theme=jobsite] .fld input,body[data-theme=jobsite] .fld textarea{background:#262b30;color:#e8eaed;border-color:#3a4046;} body[data-theme=jobsite] .qbtn{background:#1d2024;color:#e8eaed;} body[data-theme=jobsite] .addbtn,body[data-theme=jobsite] .cartbtn{background:#ff7a00;color:#141619;} body[data-theme=jobsite] .addbtn:hover,body[data-theme=jobsite] .cartbtn:hover{background:#ffa04d;} body[data-theme=jobsite] .landing-hero{background:linear-gradient(150deg,#0c0e10 0%,#1a1d21 70%,#2b230f 100%);} body[data-theme=jobsite] .landing-hero h1 em{color:#ff7a00;} body[data-theme=jobsite] .fband,body[data-theme=jobsite] footer{background:#0c0e10;} body[data-theme=jobsite] .fband h3 span{color:#ff7a00;} body[data-theme=jobsite] .imgbox{background:#262b30;} body[data-theme=jobsite] .cat .ph{background:repeating-linear-gradient(45deg,#22262a,#22262a 14px,#1b1e22 14px,#1b1e22 28px);color:#6f7a84;} body[data-theme=jobsite] h2.sec,body[data-theme=jobsite] .shead h3,body[data-theme=jobsite] .cat h2,body[data-theme=jobsite] .landing-hero h1{text-transform:uppercase;letter-spacing:.02em;} body[data-theme=jobsite] .delivered{background:#15321f;color:#7ee0a3;} body[data-theme=jobsite] .ccount{color:#141619;} body[data-theme=jobsite] .crow .ci b,body[data-theme=jobsite] .modal h3{color:#f2f4f6;} /* ================= THEME: COASTAL LUXE (warm premium) ================= */ body[data-theme=luxe]{--navy:#14453d;--navy2:#1d5f54;--aqua:#9c7c2c;--amber:#c9a227;--amber-dk:#a5851c;--bg:#faf7f1;--line:#e6ddcc;--mut:#6f6a5c;} body[data-theme=luxe] .landing-hero h1,body[data-theme=luxe] h2.sec,body[data-theme=luxe] .shead h3,body[data-theme=luxe] .cat h2,body[data-theme=luxe] .price,body[data-theme=luxe] .fband h3,body[data-theme=luxe] .modal h3{font-family:Georgia,'Times New Roman',serif;letter-spacing:0;} body[data-theme=luxe] .landing-hero{background:linear-gradient(150deg,#14453d 0%,#1d5f54 60%,#2c6e5f 100%);} body[data-theme=luxe] .landing-hero h1 em,body[data-theme=luxe] .fband h3 span{color:#e6c568;} body[data-theme=luxe] .go,body[data-theme=luxe] .submitbtn{color:#fff;} body[data-theme=luxe] .fband{background:#14453d;} body[data-theme=luxe] footer{background:#0f332d;} body[data-theme=luxe] .cat .ph{background:repeating-linear-gradient(45deg,#f1ece1,#f1ece1 14px,#e9e2d2 14px,#e9e2d2 28px);color:#9a8f76;} /* ================= THEME: MONO (black & white brutalist) ================= */ body[data-theme=mono]{--navy:#111111;--navy2:#333333;--aqua:#111111;--amber:#ffe600;--amber-dk:#e6cf00;--bg:#ffffff;--line:#111111;--mut:#555;} body[data-theme=mono] .cat,body[data-theme=mono] .series,body[data-theme=mono] .modal,body[data-theme=mono] .imgbox,body[data-theme=mono] .addbtn,body[data-theme=mono] .qbtn,body[data-theme=mono] .cartbtn,body[data-theme=mono] .go,body[data-theme=mono] .submitbtn,body[data-theme=mono] .qty,body[data-theme=mono] .fld input,body[data-theme=mono] .fld textarea,body[data-theme=mono] .faq details,body[data-theme=mono] .cartlist,body[data-theme=mono] .fpoint{border-radius:0;} body[data-theme=mono] .cat,body[data-theme=mono] .series{border:2px solid #111;} body[data-theme=mono] .landing-hero{background:#111;} body[data-theme=mono] .landing-hero h1 em,body[data-theme=mono] .fband h3 span{color:#ffe600;} body[data-theme=mono] h2.sec,body[data-theme=mono] .shead h3,body[data-theme=mono] .cat h2,body[data-theme=mono] .landing-hero h1{text-transform:uppercase;letter-spacing:-.02em;} body[data-theme=mono] .go,body[data-theme=mono] .submitbtn{background:#ffe600;color:#111;} body[data-theme=mono] .delivered{background:#111;color:#ffe600;} body[data-theme=mono] .fband,body[data-theme=mono] footer{background:#111;} body[data-theme=mono] .titem .t1{text-transform:uppercase;font-size:13px;} body[data-theme=mono] .cat .ph{background:repeating-linear-gradient(45deg,#f2f2f2,#f2f2f2 14px,#e6e6e6 14px,#e6e6e6 28px);color:#888;} /* ---- WordPress integration ---- */ .admin-bar header{top:32px;} @media screen and (max-width:782px){.admin-bar header{top:46px;}} @media screen and (max-width:600px){.admin-bar header{top:0;}} .ptp-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;} .submitbtn[disabled]{opacity:.6;cursor:not-allowed;} .formerr{background:#fdecec;border:1px solid #f5b5b5;color:#a12828;font-size:13px;font-weight:600;border-radius:8px;padding:10px 12px;margin-bottom:12px;} /* ---- Thank-you page ---- */ .thanks{background:#fff;border:1px solid var(--line);border-radius:14px;padding:38px 34px;max-width:860px;margin:0 auto;text-align:center;} .thanks-mark{font-size:46px;line-height:1;margin-bottom:10px;} .thanks h2{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.4px;margin-bottom:10px;} .thanks p{color:var(--mut);font-size:15px;max-width:620px;margin:0 auto 18px;} .thanks-points{margin-top:26px;text-align:left;} .thanks-points .fpoint{background:var(--bg);border:1px solid var(--line);} .thanks-points .fpoint b{color:var(--navy);} .thanks-points .fpoint p{color:var(--mut);margin:0;font-size:13px;} .thanks-note{font-size:13.5px;margin-top:24px;} .thanks-btn{display:inline-block;background:var(--amber);color:#20242b;font-weight:800;font-size:15px;border-radius:8px;padding:13px 26px;margin-top:6px;} .thanks-btn:hover{background:var(--amber-dk);color:#fff;} body[data-theme=fresh] .thanks{border-radius:20px;} body[data-theme=fresh] .thanks-btn{border-radius:24px;} body[data-theme=jobsite] .thanks{background:#1d2024;} body[data-theme=jobsite] .thanks-points .fpoint{background:#171a1d;} body[data-theme=jobsite] .thanks h2{text-transform:uppercase;} body[data-theme=luxe] .thanks h2{font-family:Georgia,'Times New Roman',serif;letter-spacing:0;} body[data-theme=luxe] .thanks-btn{color:#fff;} body[data-theme=mono] .thanks,body[data-theme=mono] .thanks-btn{border-radius:0;} body[data-theme=mono] .thanks{border:2px solid #111;} body[data-theme=mono] .thanks-btn{background:#ffe600;color:#111;}