/* ========================================================================== Terplandia base stylesheet (main.css) Loaded on every page. Holds what is shared site-wide: design tokens, shared components (buttons, eyebrow, section heading), the site header and footer, the age gate and the signup popup. Page-specific styles go in css/pages/.css and load only on that page. ========================================================================== */ /* -------------------------------------------------------------------------- Design tokens. Every brand colour, gradient, font stack and the page gutter, defined once. Components below and the page stylesheets use these. (Two gold gradients exist in the design with different stops; both are kept so nothing changes visually.) -------------------------------------------------------------------------- */ :root{ /* Purple */ --color-purple:#6b3fa0; --color-purple-dark:#4a2680; --color-purple-hover:#56298a; --color-plum:#211233; /* Text */ --color-ink:#2b2435; --color-ink-mid:#3f3a4a; --color-ink-soft:#4f4660; --color-muted:#6a6175; --color-note:#9a93a4; --color-note-2:#8a8294; /* Gold */ --color-gold:#b0871f; --color-gold-text:#7e6111; --color-gold-bright:#f0b90b; --color-gold-light:#f1cc54; --color-gold-deep:#c9971c; --color-gold-ink:#5a4410; --gradient-gold-45:linear-gradient(135deg,#fbe08a 0%,#f4c430 45%,#c9971c 100%); --gradient-gold-55:linear-gradient(135deg,#fbe08a,#f4c430 55%,#c9971c); /* Green */ --color-green:#1c3f2b; --color-forest:#1f4a33; --color-green-free:#1f8a5b; --color-mist:#cfe0cb; --color-sage:#b4cdba; /* Surfaces and lines */ --color-white:#fff; --color-lilac:#f5f1fb; --color-line:#ece8f0; --color-line-2:#efeaf3; /* Fonts (self-hosted, see base.css) */ --font-sans:"Hanken Grotesk",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; /* Page gutter: 64px, 40px at 1080px and below, 20px at 640px and below */ --pad:64px; } @media (max-width:1080px){ :root{--pad:40px;} } @media (max-width:640px){ :root{--pad:20px;} } /* -------------------------------------------------------------------------- Shared components: buttons, eyebrow label, section + section heading. -------------------------------------------------------------------------- */ .eyebrow{font-family:var(--font-sans);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold-text);line-height:1.5;} .btn{display:inline-block;font-family:var(--font-sans);font-weight:700;font-size:16px;border-radius:40px;cursor:pointer;transition:background .15s ease,transform .15s ease,box-shadow .15s ease,filter .15s ease;text-align:center;} .btn-purple{color:#fff;background:var(--color-purple);padding:16px 32px;} .btn-purple:hover{background:var(--color-purple-hover);transform:translateY(-1px);} .btn-gold{color:var(--color-gold-ink);background:var(--gradient-gold-45);padding:16px 32px;box-shadow:0 10px 24px rgba(231,198,107,.5);} .btn-gold:hover{transform:translateY(-1px);filter:brightness(1.03);} .btn-ghost{color:var(--color-purple);border:1.5px solid var(--color-purple);padding:14px 30px;} .btn-ghost:hover{background:var(--color-purple);color:#fff;transform:translateY(-1px);} .sec{padding:88px var(--pad);} .sec-head{margin-bottom:44px;} .sec-head .eyebrow{margin-bottom:14px;display:block;} .sec-head h2{font-family:var(--font-serif);font-weight:500;line-height:1.06;color:var(--color-ink);font-size:clamp(34px,4vw,50px);} .sec-head h2 em{font-style:italic;color:var(--color-purple);} .sec-head p{font-size:18px;line-height:1.6;color:var(--color-muted);margin-top:18px;} @media (max-width:640px){ .sec{padding:56px var(--pad);} } /* -------------------------------------------------------------------------- Site header (.thn) -------------------------------------------------------------------------- */ .thn{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(20px,5vw,72px);background:rgba(255,255,255,.97);border-bottom:1px solid var(--color-line-2);position:relative;z-index:60;font-family:var(--font-sans);} /* Scoped under .thn so it beats WooCommerce's `.woocommerce img{height:auto}` (specificity 0,1,1) on the PDP/cart/checkout; otherwise the logo renders at its natural height (~325px) on Woo pages only. */ .thn .thn-logo{height:64px;width:auto;display:block;} .thn-links{display:flex;gap:28px;align-items:center;font-size:16px;font-weight:500;flex-wrap:wrap;} .thn-links a{color:var(--color-ink-mid);text-decoration:none;transition:color .15s ease;} .thn-links a:hover,.thn-links a:focus-visible{color:var(--color-purple);} .thn-links a.cur{color:var(--color-purple);font-weight:700;} .thn-phone{color:var(--color-gold-deep) !important;font-weight:700;white-space:nowrap;} .thn-phone:hover{color:var(--color-purple) !important;} .thn-cta{font-weight:700;font-size:15px;color:#fff;background:var(--color-purple);padding:12px 24px;border-radius:40px;white-space:nowrap;text-decoration:none;transition:background .15s ease;} .thn-cta:hover{background:#58348a;} /* Magic Box hover card. Pure CSS, zero JS. */ .tmb{position:relative;display:inline-flex;align-items:center;} .thn .tmb-trig{display:inline-flex;align-items:center;gap:6px;background:var(--gradient-gold-55);color:var(--color-gold-ink) !important;font-weight:700;font-size:14px;padding:7px 15px;border-radius:30px;white-space:nowrap;box-shadow:0 4px 12px rgba(201,151,28,.28);transition:filter .15s ease,transform .15s ease;} .thn .tmb-trig:hover,.thn .tmb-trig:focus-visible{filter:brightness(1.05);transform:translateY(-1px);color:var(--color-gold-ink) !important;} /* The ✦ before "Magic Box" (empty alt text so screen readers skip it). */ .thn .tmb-trig::before{content:"\2726";content:"\2726" / "";font-size:12px;line-height:1;} .tmb-card{position:absolute;top:calc(100% + 12px);right:0;width:300px;padding:0 17px 17px;background:#fff;border:1px solid #ece3d6;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(43,32,20,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;pointer-events:none;z-index:200;} .tmb:hover .tmb-card,.tmb:focus-within .tmb-card{opacity:1;visibility:visible;transform:none;pointer-events:auto;} /* Card image: a full-bleed block at the top of the card. The image is only set on hover/focus, so it never loads on the initial page render. */ .tmb-card::before{content:"";display:block;height:208px;margin:0 -17px 15px;background:#e1d1b7 center/contain no-repeat;} .tmb:hover .tmb-card::before,.tmb:focus-within .tmb-card::before{background-image:url('../images/magic-box-card.webp');} /* Hover bridge over the 12px gap between the trigger and the card, as wide as the card. Only catches the pointer while the card is open. */ .tmb::after{content:"";position:absolute;top:100%;right:0;width:300px;height:12px;pointer-events:none;} .tmb:hover::after{pointer-events:auto;} .tmb-h{display:block;font-family:var(--font-serif);font-weight:600;font-size:21px;color:var(--color-ink);line-height:1.1;} .tmb-p{font-size:13px;line-height:1.5;color:#5a5168;margin:6px 0 13px;font-weight:500;} .thn .tmb-btn{display:block;text-align:center;background:var(--gradient-gold-55);color:var(--color-gold-ink) !important;font-weight:700;font-size:13.5px;padding:10px;border-radius:30px;transition:filter .15s ease;} .thn .tmb-btn:hover{filter:brightness(1.05);} /* Mobile menu. Scoped under .thn so it beats the button reset in base.css ([type=button]:hover) and the Elementor kit's `.elementor-kit-5 button` (cyan background, Playfair, text-shadow). */ .thn .thn-toggle, .thn .thn-toggle:hover, .thn .thn-toggle:focus{display:none;background:none;border:0;font-family:inherit;font-size:26px;line-height:1;color:var(--color-purple);text-shadow:none;cursor:pointer;padding:4px 10px;border-radius:8px;} @media(max-width:980px){ .thn .thn-toggle, .thn .thn-toggle:hover, .thn .thn-toggle:focus{display:inline-flex;align-items:center;order:3;} .thn-cta{order:2;} .thn-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 0;box-shadow:0 12px 24px rgba(33,18,51,.12);border-bottom:1px solid var(--color-line-2);z-index:50;} .thn-links a{padding:12px clamp(20px,5vw,72px);width:100%;} .thn-links.open{display:flex;} .tmb{width:100%;} .thn .tmb-trig{background:none !important;box-shadow:none;color:var(--color-purple) !important;padding:12px clamp(20px,5vw,72px);width:100%;font-size:16px;border-radius:0;transform:none !important;} .tmb-card,.tmb::after{display:none;} } @media(max-width:480px){ .thn .thn-logo{height:52px;} } /* -------------------------------------------------------------------------- Site footer (.tcl, "site closer"): the ask + proof, brand / nav / newsletter, legal line. Layered plum -> purple -> forest sky. Markup: template-parts/footer/; newsletter behaviour: main.js. -------------------------------------------------------------------------- */ .tcl{ position:relative;isolation:isolate;overflow:hidden;color:#fff;font-family:var(--font-sans); /* Full-bleed on the site's own content gutter, so the footer's edges line up with the page sections above it (--pad, see the tokens). No max-width. */ padding:0 var(--pad); background:#2a1747;content-visibility:auto;contain-intrinsic-size:auto 1400px} /* layered sky: plum at top, purple middle, forest photo revealed at the bottom */ .tcl::before{content:"";position:absolute;inset:0;z-index:-2; background:url('../images/footer-forest.webp') center 70%/cover no-repeat} .tcl::after{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(60% 45% at 50% 22%,rgba(241,204,84,.20),rgba(241,204,84,0) 70%), linear-gradient(180deg,var(--color-plum) 0%,#3a1d68 22%,rgba(74,38,128,.94) 42%,rgba(74,38,128,.55) 62%,rgba(31,74,51,.55) 80%,rgba(31,74,51,.92) 100%)} /* ---- 1. the ask ---- */ /* The gold hairline under the ask (between it and the columns) is its bottom border. */ .tcl-ask{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(72px,9vw,128px) 0 clamp(48px,6vw,80px); border-bottom:1px solid;border-image:linear-gradient(90deg,rgba(241,204,84,0),rgba(241,204,84,.45) 20%,rgba(241,204,84,.45) 80%,rgba(241,204,84,0)) 1} .tcl-ask h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(42px,6.2vw,84px);line-height:.98;letter-spacing:-.01em;margin:0;text-wrap:balance} .tcl-ask h2 em{font-style:italic;color:var(--color-gold-light)} .tcl-ask p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:#e9e1f6;max-width:34em;margin:22px 0 0} .tcl-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .tcl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .15s ease,filter .15s ease,background .15s ease} .tcl-btn:active{transform:translateY(1px)} .tcl-btn.is-gold{background:var(--gradient-gold-55);color:var(--color-gold-ink);box-shadow:0 12px 30px rgba(20,10,40,.35)} .tcl-btn.is-gold:hover{filter:brightness(1.06)} .tcl-btn.is-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.04)} .tcl-btn.is-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff} .tcl-btn:focus-visible{outline:3px solid var(--color-gold-light);outline-offset:3px} /* proof: what actually ships in the box */ .tcl-proof{list-style:none;margin:0;padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,36px);border-radius:24px; background:rgba(33,18,51,.42);border:1px solid rgba(241,204,84,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} @supports not (backdrop-filter:blur(10px)){.tcl-proof{background:rgba(33,18,51,.72)}} /* Each point: gold check (::before, spans both rows) | title / text. */ .tcl-proof li{display:grid;grid-template-columns:22px 1fr;gap:0 14px;align-items:start;padding:14px 0;border-top:1px solid rgba(255,255,255,.1)} .tcl-proof li:first-child{border-top:0;padding-top:0} .tcl-proof li:last-child{padding-bottom:0} .tcl-proof li::before{content:"";grid-row:1 / span 2;width:22px;height:22px;margin-top:1px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1cc54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat} .tcl-proof strong{display:block;font-weight:700;font-size:16px;color:#fff} .tcl-proof span{display:block;font-size:14.5px;line-height:1.5;color:#d9d0ea;margin-top:2px} /* ---- 2. brand, nav, newsletter ---- */ .tcl-cols{display:grid;grid-template-columns:minmax(240px,1.15fr) repeat(3,minmax(150px,.7fr)) minmax(280px,1.3fr);gap:clamp(28px,4vw,56px);padding:clamp(44px,5vw,64px) 0 clamp(36px,4vw,52px)} .tcl-brand img{height:52px;width:auto;display:block;margin-bottom:16px} .tcl-brand p{font-size:15px;line-height:1.65;color:var(--color-mist);margin:0;max-width:34ch} .tcl-brand a.ph{display:inline-block;margin-top:16px;font-weight:700;color:var(--color-gold-light);text-decoration:none;font-size:16px} .tcl-social{display:flex;gap:10px;margin-top:18px} .tcl-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(241,204,84,.35);color:var(--color-mist);transition:background .15s,color .15s} .tcl-social a:hover,.tcl-social a:focus-visible{background:var(--color-gold-light);color:var(--color-plum);border-color:var(--color-gold-light)} .tcl-social svg{width:18px;height:18px;fill:currentColor} .tcl-nav h3{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold-light);margin:6px 0 12px} .tcl-nav a{display:block;color:var(--color-mist);text-decoration:none;font-size:15px;line-height:2.05;transition:color .15s} .tcl-nav a:hover,.tcl-nav a:focus-visible{color:#fff} .tcl-news h3{font-family:var(--font-serif);font-weight:600;font-size:26px;line-height:1.1;margin:0 0 8px;color:#fff} .tcl-news p{font-size:14.5px;line-height:1.55;color:var(--color-mist);margin:0 0 16px} .tcl-news form{display:flex;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);padding:5px;transition:border-color .15s,background .15s} /* The success handler sets form.hidden, but the [hidden] attribute only carries the UA stylesheet's display:none — which the display:flex above outranks. The form stayed on screen with the button frozen on "Sending...". Explicit rule. */ .tcl-news form[hidden]{display:none} .tcl-news form:focus-within{border-color:var(--color-gold-light);background:rgba(255,255,255,.12)} .tcl-news input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:500 15px var(--font-sans);padding:0 8px 0 18px} .tcl-news input::placeholder{color:rgba(255,255,255,.68)} .tcl-news input.is-bad{color:#ffd9cf} /* Scoped under .tcl and repeated for :hover/:focus so it beats the button reset in base.css ([type=submit]:hover turns text white) and the Elementor kit's `.elementor-kit-5 button` (Playfair + text-shadow). */ .tcl .tcl-news button, .tcl .tcl-news button:hover, .tcl .tcl-news button:focus{border:0;border-radius:999px;padding:0 20px;min-height:44px;font:700 14px var(--font-sans);color:var(--color-gold-ink);background:var(--gradient-gold-55);text-shadow:none;cursor:pointer;white-space:nowrap} .tcl .tcl-news button:hover{filter:brightness(1.06)} .tcl-news button[disabled]{opacity:.65;cursor:default} .tcl-news .msg{display:block;margin-top:10px;font-size:13px;line-height:1.5;color:#ffd9cf;min-height:0} .tcl-news .msg.ok{color:var(--color-gold-light)} .tcl-news small{display:block;margin-top:10px;font-size:12.5px;color:var(--color-sage)} .tcl-news small b{color:var(--color-gold-light);font-weight:700} /* ---- 3. legal ---- */ .tcl-legal{border-top:1px solid rgba(241,204,84,.16);padding:18px 0 40px;font-size:12px;line-height:1.6;color:var(--color-sage);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap} .tcl-legal span{max-width:78ch} /* ---- responsive ---- */ /* Content gutter steps on the homepage's breakpoints so the footer keeps matching the sections above it. Scoped to .tcl — not :root. */ @media (max-width:1024px){ .tcl-cols{grid-template-columns:1fr 1fr 1fr} .tcl-brand{grid-column:1/-1;order:-2} .tcl-news{grid-column:1/-1;max-width:520px;order:-1} } @media (max-width:800px){ .tcl-ask{grid-template-columns:1fr;gap:36px;padding-top:64px} .tcl-ask h2{font-size:clamp(40px,10.5vw,60px)} .tcl-btns{gap:12px} .tcl-btn{flex:1 1 220px} } @media (max-width:560px){ .tcl-cols{grid-template-columns:1fr 1fr;gap:28px 20px} .tcl-nav a{line-height:2.2} .tcl-legal{padding-bottom:calc(36px + env(safe-area-inset-bottom));flex-direction:column;gap:12px} } @media (prefers-reduced-motion:reduce){.tcl *{transition:none!important}} /* -------------------------------------------------------------------------- 21+ age gate (.terp-age-gate). Hidden unless has .terp-age-pending, which the cookie check in sets before first paint (inc/age-gate.php). Buttons are scoped under .terp-age-gate so they beat the button reset in base.css and the Elementor kit's `.elementor-kit-5 button` styles. -------------------------------------------------------------------------- */ .terp-age-gate{display:none;} html.terp-age-pending, html.terp-age-pending body{overflow:hidden!important;} html.terp-age-pending .terp-age-gate{ display:flex;position:fixed;inset:0;z-index:2147483647; background:rgba(13,10,26,.88); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); align-items:center;justify-content:center;padding:20px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; animation:terpAgeFadeIn .25s ease-out; } @keyframes terpAgeFadeIn{from{opacity:0;}to{opacity:1;}} .terp-age-gate__card{ background:#fdf8f0;border-radius:18px;padding:44px 36px; max-width:440px;width:100%;text-align:center; box-shadow:0 24px 64px rgba(0,0,0,.45),0 0 0 1px rgba(201,168,76,.15); animation:terpAgeRise .45s cubic-bezier(.16,1,.3,1); } @keyframes terpAgeRise{from{opacity:0;transform:translateY(24px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}} .terp-age-gate__brand{ font-family:'Fraunces','Playfair Display','Georgia',serif; font-size:26px;font-weight:600;color:#2d4a3e; letter-spacing:.18em;margin:0 0 26px;line-height:1; } /* Gold rule under the brand name. */ .terp-age-gate__brand::after{content:"";display:block;width:44px;height:2px;margin:18px auto 0;background:#c9a84c;border-radius:2px;} .terp-age-gate__heading{ font-family:'Fraunces','Playfair Display','Georgia',serif; font-size:24px;font-weight:600;color:#1a1a1a; margin:0 0 12px;line-height:1.3; } .terp-age-gate__subtext{font-size:15px;color:#5a5a5a;line-height:1.5;margin:0 0 26px;} .terp-age-gate .terp-age-gate__btn{ display:block;width:100%;padding:14px 20px;border:0; border-radius:10px;font-size:15px;font-weight:600;line-height:normal; cursor:pointer;font-family:inherit;text-shadow:none; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } .terp-age-gate .terp-age-gate__btn + .terp-age-gate__btn{margin-top:10px;} .terp-age-gate .terp-age-gate__btn:hover{transform:translateY(-1px);} .terp-age-gate .terp-age-gate__btn:active{transform:translateY(0);} .terp-age-gate .terp-age-gate__btn--yes, .terp-age-gate .terp-age-gate__btn--yes:focus{background:#2d4a3e;color:#fdf8f0;} .terp-age-gate .terp-age-gate__btn--yes:hover{background:#1f3329;color:#fdf8f0;box-shadow:0 6px 18px rgba(45,74,62,.32);} .terp-age-gate .terp-age-gate__btn--no, .terp-age-gate .terp-age-gate__btn--no:focus{background:transparent;color:#5a5a5a;border:1px solid #d4cdb8;} .terp-age-gate .terp-age-gate__btn--no:hover{background:#f0e9d8;color:#1a1a1a;} .terp-age-gate__legal{font-size:11px;color:#8a8a8a;margin:22px 0 0;line-height:1.5;letter-spacing:.01em;} .terp-age-gate__legal a{color:#2d4a3e;text-decoration:underline;} .terp-age-gate__legal a:hover{color:#1f3329;} @media (max-width:480px){ .terp-age-gate__card{padding:36px 24px;} .terp-age-gate__heading{font-size:21px;} .terp-age-gate__brand{font-size:22px;} } /* -------------------------------------------------------------------------- Newsletter signup popup (.tsp-). Markup: template-parts/signup-popup.php; behaviour: main.js. Buttons are scoped under .tsp-overlay so they beat the button reset in base.css and the Elementor kit's button styles. -------------------------------------------------------------------------- */ .tsp-overlay{position:fixed;inset:0;z-index:2000000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(31,16,48,.55);opacity:0;transition:opacity .28s ease;} .tsp-overlay[hidden]{display:none;} .tsp-overlay.tsp-show{opacity:1;} .tsp-card{position:relative;width:100%;max-width:432px;background:#faf8f2;border-radius:18px;padding:38px 34px 28px;box-shadow:0 30px 70px rgba(31,16,48,.4);transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1);text-align:center;font-family:var(--font-sans);} .tsp-overlay.tsp-show .tsp-card{transform:translateY(0) scale(1);} .tsp-overlay .tsp-close, .tsp-overlay .tsp-close:hover, .tsp-overlay .tsp-close:focus{position:absolute;top:12px;right:14px;background:none;border:0;font-family:inherit;font-size:30px;line-height:1;color:#a99fb2;text-shadow:none;cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .15s ease;} .tsp-overlay .tsp-close:hover, .tsp-overlay .tsp-close:focus-visible{color:var(--color-purple-dark);} .tsp-kicker{font-family:var(--font-sans);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b98d1e;margin:0 0 12px;} .tsp-h{font-family:var(--font-serif);font-weight:600;font-size:30px;line-height:1.12;color:var(--color-purple-dark);margin:0;} .tsp-sub{font-size:15px;line-height:1.55;color:#5b5566;margin:12px auto 0;max-width:34ch;} .tsp-form{display:flex;flex-direction:column;gap:10px;margin-top:22px;} .tsp-overlay .tsp-email{width:100%;padding:14px 16px;border:1px solid #ddd3c4;border-radius:12px;font-size:15px;font-family:inherit;color:#2c2636;background:#fff;transition:border-color .15s ease,box-shadow .15s ease;} .tsp-overlay .tsp-email:focus{outline:none;border-color:var(--color-purple-dark);box-shadow:0 0 0 3px rgba(74,38,128,.14);} .tsp-overlay .tsp-email.tsp-invalid{border-color:#c0492f;box-shadow:0 0 0 3px rgba(192,73,47,.12);} .tsp-overlay .tsp-btn, .tsp-overlay .tsp-btn:hover, .tsp-overlay .tsp-btn:focus{width:100%;padding:14px 20px;border:0;border-radius:12px;cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:16px;line-height:normal;color:var(--color-gold-ink);text-shadow:none;background:var(--gradient-gold-55);box-shadow:0 10px 24px rgba(31,16,48,.18);transition:filter .15s ease,transform .05s ease;} .tsp-overlay .tsp-btn:hover{filter:brightness(1.05);} .tsp-overlay .tsp-btn:active{transform:translateY(1px);} .tsp-overlay .tsp-btn[disabled]{opacity:.6;cursor:default;} .tsp-msg{font-size:13.5px;line-height:1.5;margin:12px 0 0;min-height:0;color:#c0492f;} .tsp-fine{font-size:11.5px;color:#8b8496;margin-top:14px;} /* Thank-you state: main.js adds .is-done to the card after a successful signup. */ .tsp-done{display:none;flex-direction:column;align-items:center;} .tsp-card.is-done>:not(.tsp-done):not(.tsp-close){display:none;} .tsp-card.is-done .tsp-done{display:flex;} /* Green check badge above "You're on the list." */ .tsp-done::before{content:"";width:56px;height:56px;margin:0 auto 16px;border-radius:50%; background:#e7f0e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4a33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/30px 30px no-repeat;} @media(max-width:480px){.tsp-card{padding:34px 22px 24px;}.tsp-h{font-size:26px;}} @media(prefers-reduced-motion:reduce){.tsp-overlay,.tsp-card{transition:none;}} /* -------------------------------------------------------------------------- Third-party fixes (moved from the old plugin, where they were inline