/* * Xtreme HD IPTV Pro — theme stylesheet. * * Carries the approved design from `xtreme-hd-iptv-pro-website.html`. The custom * properties below mirror the theme.json palette one-for-one so a token can be * changed in one place; theme.json feeds the editor, these feed this file. * * Loaded on the front end and as the editor stylesheet, so what an editor sees * matches what a visitor gets. */ :root{ --ink:#0E0E0E; --panel:#141414; --panel-2:#232323; --blue:#C0282A; --blue-deep:#9E1F21; --gold:#E8595B; --txt:#F4F1EF; --mut:#B9B2AE; --line:rgba(185,178,174,.16); /* * Controls need a stronger edge than decorative dividers. --line measures * 1.25:1 against both grounds, and WCAG 1.4.11 asks for 3:1 on the boundary * of a form control; this reaches 3.44:1 while staying the same hue, so the * fields read as fields without changing the palette. */ --line-field:rgba(185,178,174,.6); --line-gold:rgba(232,89,91,.25); --radius:14px; /* * Vertical rhythm (2026-09-30). One scale for every full-width band on the * site, so the distance between two sections is the same on every page and * changing it is a one-line edit. * * --band a content section's top and bottom padding. Two sections * meeting therefore sit 2x --band apart. * --band-hero a hero's bottom padding. Deliberately less than --band: a * hero ends with its own generous leading, and the pair * --band-hero + --band lands within a few px of the gap the * kit produced by hand, while now being derived rather than * guessed. * --band-head the space under a `.section-head` before its content. * * Before this there was no tablet tier: 84px held from 601px all the way up, * then cliffed to 60px at 600. A 768px tablet was getting desktop bands. */ --band:84px; --band-hero-top:88px; --band-hero:64px; --band-head:42px; /* * Inside a section. Each of these was three or four different numbers doing * one job before 2026-09-30: a lead under a heading was 12, 12, 14 and 18px * depending on which pattern wrote it. */ --gap-lead:14px; /* a lead paragraph under its heading */ --gap-after-grid:32px; /* a button or block following a grid of cards */ --gap-note:22px; /* small print following a grid */ --disp:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; } /* * The two steps down. Redefining the tokens moves every band on the site at * once: sections, both heroes, the 404 and the space under a section head. */ @media(max-width:960px){ :root{--band:66px;--band-hero-top:70px;--band-hero:52px;--band-head:34px} } @media(max-width:600px){ :root{--band:56px;--band-hero-top:58px;--band-hero:44px;--band-head:28px} } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--ink);color:var(--txt);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block;height:auto} a{color:var(--gold);text-decoration:none} a:hover{text-decoration:underline} button{font-family:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .wrap{max-width:1120px;margin:0 auto;padding:0 22px} .skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:200} .skip:focus{left:10px;top:10px} /* * Visually hidden but available to assistive technology and to crawlers. * Several sections in the approved design carry no visible heading; rather * than leave those regions unnamed, they get a heading in this class. */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- Type ---------- */ h1,h2,h3,h4{font-family:var(--disp);line-height:1.12;letter-spacing:-.01em} /* * Balance the display headings. * * Five of the seven home-page headings stranded a single word on the last * line at a 320px viewport ("day", "one", "decide", "steps"), and several * still did at 390px. text-wrap:balance lets the browser even the lines out * instead, which fixes it without touching the type scale — the alternative, * a smaller mobile step, would have changed the design. * * Applies only to short blocks (browsers cap it around six lines), so body * copy is unaffected, and it is simply ignored where unsupported. */ h1,h2,h3{text-wrap:balance} h1{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:900} h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800} h3{font-size:clamp(1.06rem,2.2vw,1.18rem);font-weight:700} .accent-i{font-style:italic;font-weight:900;color:var(--gold)} .nowrap{white-space:nowrap} .eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .eyebrow::before{content:"";width:24px;height:14px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Crect width='4.5' height='14' rx='2.2' fill='%23E8595B'/%3E%3Cpath d='M9 0l15 7-15 7z' fill='%23C0282A'/%3E%3C/svg%3E") no-repeat center/contain} /* An

(FAQ group titles) must not inherit the h2 scale. */ h2.eyebrow,h3.eyebrow{font-size:.8rem;line-height:1.4;letter-spacing:.22em} .lead{color:var(--mut);font-size:1.08rem;max-width:640px} .section{padding:var(--band) 0} /* A section whose top space is already supplied by the band above it, such as the body of a post sitting under the post hero. */ .section-flush-top{padding-top:0} /* One value each for the two things that follow a grid inside a section. */ .after-grid{margin-top:var(--gap-after-grid)} .section-note{color:var(--mut);font-size:.9rem;margin-top:var(--gap-note)} /* A lead under a heading, wherever it is written. */ .hero .lead,.section-head .lead{margin-top:var(--gap-lead)} .section-head{margin-bottom:var(--band-head)} .center{text-align:center} .center .eyebrow{justify-content:center} .center .lead{margin:var(--gap-lead) auto 0} /* ---------- Speed-line signature ---------- */ .tri{display:inline-block;width:.55em;height:.62em;background:var(--blue);clip-path:polygon(0 0,100% 50%,0 100%);flex:none} /* ---------- Header ---------- */ .site-head{position:sticky;top:0;z-index:100;background:rgba(14,14,14,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:26px;height:72px} .brand img{height:48px;width:auto} .nav-links{display:flex;gap:4px;list-style:none;margin-left:auto} .nav-links a{display:block;padding:9px 13px;color:var(--txt);font-weight:500;font-size:.95rem;border-radius:9px} .nav-links a:hover{text-decoration:none;background:var(--panel-2);color:var(--gold)} .nav-links a.active{color:var(--gold)} .nav-cta{margin-left:6px} .nav-trial{display:none} .burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;color:var(--txt);min-width:44px;min-height:44px;padding:8px 12px;font-size:1.15rem;margin-left:auto;align-items:center;justify-content:center} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:.98rem;padding:13px 24px;border-radius:11px;border:0;text-decoration:none;transition:transform .15s,box-shadow .15s} .btn:hover{text-decoration:none;transform:translateY(-2px)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 24px rgba(192,40,42,.35)} .btn-blue:hover{box-shadow:0 10px 30px rgba(192,40,42,.5)} .btn-gold{background:var(--gold);color:#1A0B0B} .btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--line-gold);color:var(--gold)} .btn .tri{background:currentColor;width:.5em;height:.58em} .btn-blue .tri{background:var(--gold)} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding:var(--band-hero-top) 0 var(--band-hero);background: radial-gradient(720px 420px at 82% -10%,rgba(192,40,42,.32),transparent 65%), radial-gradient(560px 340px at -8% 110%,rgba(232,89,91,.10),transparent 60%),var(--ink)} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px} .chip{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--txt);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px} .chip .tri{background:var(--gold)} .hero-cta{display:flex;flex-wrap:wrap;gap:14px} .hero-note{margin-top:14px;color:var(--mut);font-size:.88rem} .hero-visual{position:relative} .screen{position:relative;border-radius:18px;border:1px solid var(--line-gold);background:linear-gradient(150deg,var(--panel-2),var(--panel) 60%);padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.55)} .screen-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:16px} .live-dot{display:inline-flex;align-items:center;gap:7px;color:var(--gold)} .live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 1.6s infinite} @keyframes pulse{50%{opacity:.35}} .epg-row{display:grid;grid-template-columns:minmax(3rem,4rem) 1fr;gap:12px;align-items:center;padding:11px 12px;border-radius:11px;margin-bottom:8px;background:rgba(255,255,255,.028);border:1px solid transparent} .epg-row.playing{border-color:var(--line-gold);background:rgba(232,89,91,.05)} .epg-logo{height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:900;font-size:.72rem;letter-spacing:.03em;background:var(--blue);color:#fff} .epg-logo.c2{background:#2A1414;color:var(--gold)} .epg-logo.c3{background:var(--gold);color:#1A0B0B} .epg-title{font-weight:600;font-size:.92rem} .epg-meta{color:var(--mut);font-size:.8rem} .epg-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.09);margin-top:7px;overflow:hidden} .epg-bar i{display:block;height:100%;width:64%;background:linear-gradient(90deg,var(--blue),var(--gold))} /* ---------- Cards / grids ---------- */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px} .card h3{margin:14px 0 8px} .card p{color:var(--mut);font-size:.95rem} .icon-play{width:42px;height:42px;border-radius:11px;background:rgba(192,40,42,.18);border:1px solid rgba(192,40,42,.45);display:flex;align-items:center;justify-content:center} .icon-play .tri{width:12px;height:14px;background:var(--gold)} .stat-band{background:linear-gradient(90deg,var(--blue-deep),var(--blue));border-radius:var(--radius);padding:34px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .stat{min-width:0} .stat b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(1.35rem,5.5vw,2rem);color:#fff;white-space:nowrap} .stat span{color:rgba(255,255,255,.78);font-size:.86rem;font-weight:500} /* ---------- Steps ---------- */ .step{position:relative;padding-left:22px} .step::before{content:"";position:absolute;left:0;top:8px;width:11px;height:13px;background:var(--gold);clip-path:polygon(0 0,100% 50%,0 100%)} .step h3{margin-bottom:6px} .step p{color:var(--mut);font-size:.95rem} /* ---------- Pricing ---------- */ .plan{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px} .plan.hot{border-color:var(--blue);background:linear-gradient(180deg,rgba(192,40,42,.14),var(--panel) 55%)} .plan-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1A0B0B;font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap} /* h3 in the markup, so plan names sit in the outline; the design's small-caps treatment is preserved here rather than by downgrading the element. */ .plan-name{font-family:var(--disp);font-weight:700;font-size:1rem;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0} .plan-price{font-family:var(--disp);font-weight:900;font-size:2.6rem;margin:10px 0 2px} .plan-price small{font-size:1rem;font-weight:700;color:var(--mut)} .plan-per{color:var(--gold);font-size:.86rem;font-weight:600;margin-bottom:18px} .plan ul{list-style:none;margin:0 0 24px;flex:1} .plan li{display:flex;gap:10px;align-items:baseline;padding:6px 0;color:var(--mut);font-size:.93rem} .plan li .tri{background:var(--gold);width:9px;height:11px;transform:translateY(1px)} .plan .btn{justify-content:center} /* ---------- Tables ---------- */ table{width:100%;border-collapse:collapse;font-size:.93rem} /* 34rem holds the label column plus three price columns at their natural width. Wider than that and the container is roomier anyway, so desktop rendering is unchanged; narrower and .table-scroll finally scrolls. */ .table-scroll table{min-width:34rem} th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)} thead th{font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} tbody th{font-weight:600;color:var(--txt)} td{color:var(--mut)} td b{color:var(--txt)} .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin:1.75rem 0} /* A table is a block, not an inline aside: it needs air above and below or it reads as part of the paragraph it follows. `figure.wp-block-table` carries a browser default margin that varies, so it is set explicitly here for both the plain wrapper and the block-editor one. */ .post-content figure.wp-block-table,.entry-content figure.wp-block-table{margin:1.75rem 0} .table-scroll+p,.table-scroll+h2,.table-scroll+h3{margin-top:1.5rem} .is-yes{color:var(--gold)} .is-no{color:var(--mut)} /* ---------- FAQ ---------- */ /* * 760px is the same measure .article uses for every other long-form reading * surface on the site (blog posts, legal pages, About). Answers here are the * same kind of prose, and at the full 1076px they ran to ~136 characters a * line, roughly double a comfortable measure. Not the .article class itself: * that carries h2/h3 rules which would clobber the gold eyebrow and the * question headings. Below an ~804px viewport this changes nothing. */ .faq-group{max-width:760px;margin:0 auto 38px} /* * 760px is the reading measure .article and .faq-group already use. The FAQ * page capped its accordions through .faq-group; the identical component on * /pricing/ had no wrapper and ran to ~136 characters a line, roughly double * a comfortable measure and disagreeing with /faq/. * * Set on .acc itself rather than a new wrapper: inside .faq-group the * accordions already fill 760px, so nothing on /faq/ moves, and no markup or * vertical spacing changes on either page. */ .acc{max-width:760px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:0 auto 10px;overflow:hidden} .acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;font-weight:600;cursor:pointer} .acc summary::-webkit-details-marker{display:none} /* * .acc has overflow:hidden (the border radius needs it) and no padding, so * summary sits flush to the clipped edge and the global outline-offset:3px * ring is painted outside it — i.e. not painted at all. Drawing it inwards * keeps the same gold ring fully visible on all fifteen questions. */ .acc summary:focus-visible{outline-offset:-3px} /* The plain declaration first: browsers without the alt-text syntax drop the second at parse time and keep a visible "+". Those that support it take the empty alt, so the glyph stops being read as part of every question's name — details/summary already exposes expanded state. */ .acc summary::after{content:"+";content:"+" / "";font-family:var(--disp);font-weight:800;color:var(--gold);font-size:1.25rem;transition:transform .2s} .acc[open] summary::after{transform:rotate(45deg)} /* The question is an

inside so questions appear in the document outline; it must not take the h3 display scale. */ .acc summary h3{font-size:1rem;font-weight:600;font-family:var(--body);letter-spacing:0;margin:0} .acc .acc-body{padding:0 20px 18px;color:var(--mut);font-size:.95rem} .acc .acc-body a{font-weight:600} /* ---------- Channels ---------- */ .filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px} /* * appearance:none is load-bearing, not tidy-up. This is input[type=search], * and iOS Safari applies -webkit-appearance:searchfield by default, which * discards the border-radius and padding below in favour of the platform * pill. Resetting it makes iOS render the field as designed here. * * min() rather than a bare 220px so the floor can never exceed the container. * At any viewport wide enough for 220px this is identical; below one it stops * the field pushing past .wrap and scrolling the page sideways. */ .filter-bar input{flex:1;min-width:min(220px,100%);appearance:none;-webkit-appearance:none;background:var(--panel);border:1px solid var(--line);border-radius:11px;color:var(--txt);padding:12px 16px;font-family:inherit;font-size:.95rem} .filter-bar input::placeholder{color:var(--mut)} .pill{background:var(--panel);border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:9px 18px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:.87rem} .pill.on{background:var(--blue);border-color:var(--blue);color:#fff} .cat-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px} .cat-name{font-family:var(--disp);font-size:1.05rem;font-weight:700;margin:0} .cat-card p{color:var(--mut);font-size:.88rem} /* ---------- Guides / blog ---------- */ .guide-card,.post-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;color:var(--txt);transition:border-color .15s,transform .15s} a.guide-card:hover,a.post-card:hover{text-decoration:none;border-color:var(--line-gold);transform:translateY(-3px)} .guide-ico{display:inline-flex;color:var(--gold);margin-bottom:12px} /* * The guide card's two text parts, previously repeated as inline style * attributes on all six cards — 996 bytes of identical CSS in the HTML. * Its sibling .post-card already styles the equivalent parts with classes * (.post-tag, .post-date, .post-card p); this brings the two components to * the same convention. Declarations are unchanged, so nothing moves. */ .guide-card .guide-meta{color:var(--mut);font-size:.9rem;margin-top:8px;flex:1} .guide-card .guide-open{color:var(--gold);font-weight:700;font-size:.9rem;margin-top:16px;display:inline-flex;align-items:center;gap:6px} .post-tag{color:var(--gold);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px} .post-card h3{margin-bottom:8px} .post-card p{color:var(--mut);font-size:.92rem;flex:1} .post-date{color:var(--mut);font-size:.8rem;margin-top:16px} /* Post card thumbnail — 16:9, cropped, with the branded SVG fallback. */ .post-thumb{display:block;margin:-26px -26px 20px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;aspect-ratio:16/9;background:#0B0B0B} .post-thumb img,.post-thumb-fallback{width:100%;height:100%;object-fit:cover;display:block} .post-hero{margin:0 0 8px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9} .post-hero img,.post-hero .post-thumb-fallback{width:100%;height:100%;object-fit:cover} .article{max-width:760px;margin:0 auto} .article h2{margin:36px 0 12px;font-size:1.5rem} .article h3{margin:26px 0 10px} .article p,.article li{color:var(--mut)} .article ul,.article ol{padding-left:22px;margin:12px 0} .article li{margin-bottom:8px} .article p+p{margin-top:14px} /* Key takeaways and contents, written into post_content by the content engine. Both sit inside .article, so they inherit the 760px reading column. Styled here rather than inline so the look changes in one place. */ .post-takeaways{margin:0 0 28px;padding:22px 24px;border:1px solid var(--line-gold);border-radius:14px;background:var(--panel)} .post-takeaways h2{margin:0 0 12px;font-size:1.05rem;color:var(--gold);letter-spacing:.02em} .post-takeaways ul{margin:0;padding-left:20px} .post-takeaways li{margin-bottom:8px} .post-takeaways li:last-child{margin-bottom:0} .post-toc{margin:0 0 32px;padding:18px 22px;border:1px solid var(--line);border-radius:14px} .post-toc-title{margin:0 0 10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)} .post-toc ul{margin:0;padding-left:18px} .post-toc li{margin-bottom:6px} .post-toc a{color:var(--gold);text-decoration:none} .post-toc a:hover,.post-toc a:focus-visible{text-decoration:underline} /* A heading targeted from the contents must not land under the sticky header. */ .article h2[id],.article h3[id]{scroll-margin-top:96px} .back-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-bottom:26px} .steps-ol{counter-reset:s;list-style:none;padding:0!important} .steps-ol li{counter-increment:s;position:relative;padding:0 0 18px 52px;margin:0!important} .steps-ol li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:10px;background:var(--blue);color:#fff;font-family:var(--disp);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem} .steps-ol li b{color:var(--txt)} /* Breadcrumbs — a visible trail matching the BreadcrumbList markup. */ .crumbs{margin-bottom:22px;font-size:.85rem} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0} .crumbs li{color:var(--mut);margin:0} .crumbs li+li::before{content:"/";margin-right:8px;color:var(--mut)} .crumbs a{color:var(--mut)} .crumbs a:hover{color:var(--gold)} /* Blog pagination. */ .post-pagination{margin-top:44px} .post-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;margin:0;position:static} .post-pagination a,.post-pagination span{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:10px;border:1px solid var(--line);color:var(--txt);font-weight:600;font-size:.9rem} .post-pagination a:hover{border-color:var(--line-gold);color:var(--gold);text-decoration:none} .post-pagination .current{background:var(--blue);border-color:var(--blue);color:#fff} .post-pagination .screen-reader-text{position:absolute!important} /* ---------- Inline SVG icons ---------- */ /* Base rule for every icon from inc/icons.php. Without `vertical-align` an inline SVG sits on the text baseline and drops below it; without `flex:none` it is squashed by any flex parent it lands in. */ .ip-icon{display:inline-block;vertical-align:middle;flex:none;max-width:100%;height:auto} .guide-ico .ip-icon{color:var(--gold)} .back-link .ip-icon{width:16px;height:16px} .ip-icon.is-yes{color:var(--gold)} /* ---------- Contact lines (shared by footer, contact and trial pages) ---------- */ .contact-line{display:flex;align-items:flex-start;gap:10px;padding:5px 0;color:var(--mut);font-size:.92rem} .contact-line .ip-icon{flex:none;margin-top:4px;color:var(--gold)} /* Guidance shown above the submit button on the trial, order and contact forms. Quiet on purpose: it is advice at the point of sending, not an error, so it must not compete with the button below it. Lives here rather than in ssm-brand.css because that sheet only loads where an SSM form is present, and the contact form is the theme's own. */ .form-accuracy-note{margin:2px 0 12px;padding:10px 12px;border-left:2px solid var(--gold);background:rgba(232,89,91,.06);border-radius:0 8px 8px 0;color:var(--mut);font-size:.84rem;line-height:1.5} /* ---------- Forms ---------- */ .form-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px} .field{margin-bottom:18px} /* * Inside a grid the row gap already spaces the rows, so .field's own margin was * being added on top of it: 22px + 18px = 40px between rows, plus 18px of dead * space trailing the last row. The gap owns the spacing here; the margin stays * for fields used outside a grid. */ .grid > .field{margin-bottom:0} .field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px;color:var(--txt)} /* The asterisk is the only required-marker, so it must not be decorative. */ .field label .req{color:var(--gold);font-weight:700} /* * 1rem, not .95rem. Safari on iOS zooms the viewport whenever a focused input * is under 16px, which leaves the visitor pinching back out of a horizontally * scrolling page mid-form — on the two pages where that costs an order. */ .field input,.field select,.field textarea{width:100%;background:var(--ink);border:1px solid var(--line-field);border-radius:10px;color:var(--txt);padding:13px 14px;font-family:inherit;font-size:1rem;transition:border-color .15s ease,box-shadow .15s ease} .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(185,178,174,.8)} /* Native arrow on a dark ground is near-invisible in several browsers. */ .field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B9B2AE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px} .field textarea{min-height:110px;resize:vertical} /* * A transparent outline rather than outline:none. Windows High Contrast * Mode discards box-shadow, so `none` would leave those users with no focus * indicator at all; a transparent outline is repainted by the OS instead. */ .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,89,91,.28)} /* * Confirmation panel. This is the last thing a customer sees, and on both forms * it carries an instruction they have to act on — so it is given the room to be * read rather than the tight box it used to sit in. */ .form-ok{display:none;background:linear-gradient(160deg,rgba(232,89,91,.10),rgba(232,89,91,.04));border:1px solid var(--line-gold);border-radius:16px;padding:32px 30px;color:var(--txt);text-align:center} .form-ok.show{display:block} .ok-badge{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--gold);color:var(--ink)} .ok-badge svg{display:block} .form-ok h3{font-family:var(--disp);font-weight:900;font-size:1.4rem;line-height:1.25;margin:0 0 12px;color:var(--txt)} /* * The lead paragraph only. Scoped by class rather than `> p`, which also * matched .ok-note and — being one element more specific than .ok-note's own * rule — silently zeroed its margin, leaving the note flat against the button. */ .form-ok > p.ok-lead{color:var(--mut);font-size:.95rem;line-height:1.65;margin:0 auto;max-width:46ch} .form-ok .btn{margin-top:26px} /* Caption for the button it follows, so it sits closer to that than to the block beneath. */ .form-ok > p.ok-note{color:var(--mut);font-size:.82rem;line-height:1.55;margin:14px auto 0;max-width:44ch} /* Contact block: a quiet panel inside the panel, so it reads as a next step rather than more of the same paragraph. */ .ok-contact{margin-top:28px;padding-top:24px;border-top:1px solid var(--line-gold);text-align:center} .ok-contact-head{font-family:var(--disp);font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 16px} /* contact_lines() emits bare

with no wrapper, so the block is centred as a unit while the rows stay left-aligned to each other — ragged centring would make three short lines look accidental. The parent must be text-align:center for an inline-block to centre; it was left, so the block was pinned to the left edge of a centred panel. */ .ok-contact-lines{display:inline-block;text-align:left} .ok-contact-lines .contact-line{padding:7px 0;font-size:.9rem} .form-err{color:#FF7A8A;font-size:.85rem;margin-top:6px;display:none} /* * The v2 checkbox is a fixed 302x76 iframe that does not respond to its * container, and .wrap leaves 276px at a 320px viewport — so it would push * 26px past the form and scroll the page sideways. Scaling is the only * lever Google leaves open; the explicit height stops the transform, which * does not affect layout, from leaving a 7px gap underneath. * * 345px is where 302px stops fitting (302 + .wrap's 44px of padding). */ .field-captcha .g-recaptcha{max-width:100%} @media(max-width:345px){ .field-captcha .g-recaptcha{transform:scale(.9);transform-origin:0 0;height:69px} } .field.invalid .form-err{display:block} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#FF7A8A;box-shadow:0 0 0 3px rgba(255,122,138,.18)} .form-err::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:6px;vertical-align:-1px;border-radius:50%;background:#FF7A8A} .form-status{display:none;color:#FF7A8A;font-size:.88rem;margin-top:14px} .form-note{color:var(--mut);font-size:.82rem;margin-top:16px} .btn[disabled]{opacity:.65;pointer-events:none} /* ---------- CTA band ---------- */ .cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--blue-deep),var(--blue) 60%);border-radius:20px;padding:56px 40px;text-align:center} .cta-band h2{color:#fff} .cta-band p{color:rgba(255,255,255,.82);max-width:560px;margin:12px auto 28px} .cta-streaks{position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:min(180px,40%);height:auto;opacity:.5} /* ---------- Footer ---------- */ .site-foot{border-top:1px solid var(--line);background:var(--panel);padding:60px 0 30px;margin-top:40px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .foot-brand img{height:46px;width:auto;margin-bottom:16px} .foot-brand p{color:var(--mut);font-size:.9rem;max-width:320px} /* h2 in the markup so the footer regions are named in the outline. */ .foot-col h2{font-family:var(--disp);font-weight:700;font-size:.8rem;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px} .foot-col ul{list-style:none} .foot-col a{display:block;color:var(--mut);padding:5px 0;font-size:.93rem} .foot-col a:hover{color:var(--gold);text-decoration:none} .foot-base{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;border-top:1px solid var(--line);margin-top:44px;padding-top:24px;color:var(--mut);font-size:.83rem} /* ---------- Page hero ---------- */ .page-hero{position:relative;overflow:hidden;padding:var(--band-hero-top) 0 var(--band-hero);background: radial-gradient(600px 300px at 85% -20%,rgba(192,40,42,.25),transparent 65%),var(--ink);border-bottom:1px solid var(--line)} .page-hero .lead{margin-top:var(--gap-lead)} /* ---------- Responsive ---------- */ /* ---------- Checkout ---------- */ /* * One centred column, the same shape as /free-trial/. The summary used to be a * sticky sidebar; on a page whose only job is completing the order a second * column competes with the form and forces a narrower one. It is now a compact * card above the form, and the total is repeated on the submit button so the * figure is on screen at the moment of commitment. */ .order-summary{background:var(--panel);border:1px solid var(--line-gold);border-radius:var(--radius);padding:22px 24px;margin-bottom:22px} .order-summary .eyebrow{margin-bottom:14px} .order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap} .order-total{text-align:right} .sum-name{display:block;font-family:var(--disp);font-weight:800;font-size:1.15rem} .sum-meta{display:block;color:var(--mut);font-size:.82rem;margin-top:2px} .sum-price{display:block;font-family:var(--disp);font-weight:900;font-size:1.6rem;color:var(--gold);line-height:1.1;white-space:nowrap} .sum-desc{color:var(--mut);font-size:.86rem;line-height:1.55;margin:14px 0 0} .order-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .sum-note{display:flex;gap:8px;align-items:center;color:var(--mut);font-size:.8rem;line-height:1.45} .sum-note svg{flex:none} .sum-change{font-size:.85rem;white-space:nowrap} .checkout-submit{width:100%;justify-content:center;margin-top:6px} /* The total rides the button, so the figure is never scrolled away from the action it belongs to. */ .btn-total{font-weight:900;opacity:.92} .btn-total::before{content:"·";margin:0 8px;opacity:.6} .checkout-pick{text-align:center} .pick-price{font-family:var(--disp);font-weight:900;font-size:2rem;color:var(--gold);margin:6px 0 10px} .checkout-pick .btn{margin-top:14px} /* * Numbered step headings. The two forms ask for nine things across two * distinct groups; numbering them tells the visitor how much is left, which a * plain heading does not. Counter rather than hard-coded digits, so the numbers * cannot fall out of step if a group is added. */ .form-steps{counter-reset:formstep} .form-step{counter-increment:formstep;display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 18px} .form-step::before{content:counter(formstep);flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:.82rem;letter-spacing:0} .form-step:not(:first-child){margin-top:30px} /* The trial form stands alone now, so it is centred on the reading measure rather than sharing the row with a sidebar. */ .form-solo{max-width:820px;margin:0 auto} /* Both forms hide their confirmation until the request succeeds. */ #checkoutOk,#trialOk{display:none} #checkoutOk.show,#trialOk.show{display:block} /* * Shared form furniture. /checkout/ and /free-trial/ render byte-identical * field markup, so everything below styles both. */ .field-hint{display:block;color:var(--mut);font-size:.78rem;line-height:1.45;margin-top:6px} .field.invalid .field-hint{display:none} .form-card .eyebrow{margin-top:0} .form-card .eyebrow:not(:first-child){margin-top:26px} .form-card .grid.g2{margin-bottom:10px} .trial-submit{width:100%;justify-content:center;margin-top:6px} /* The trial column has no summary beside it below 960px either, so its fields keep the pair down to the 600px tier exactly as the checkout's do. */ @media(min-width:601px){ .form-card .grid.g2{grid-template-columns:repeat(2,1fr)} } @media(max-width:960px){ .hero-grid{grid-template-columns:1fr} .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .g2{grid-template-columns:1fr} .stat-band{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;background:var(--panel);border-bottom:1px solid var(--line);padding:14px 22px 22px;display:none} .nav-links.open{display:flex} .burger{display:flex} .nav-cta{display:none} .nav-trial{display:block} } @media(max-width:600px){ /* 34px of card padding leaves only 208px of field width at 320px; this hands ~28px back to the controls without changing the card. */ .form-card{padding:20px} .order-summary{padding:18px} .sum-price{font-size:1.4rem} .sum-name{font-size:1.05rem} .form-step{font-size:.78rem;gap:9px} /* * R1: .nowrap exists to stop awkward line breaks on desktop headings. On a * phone the widest of them ("handles every day") comes within ~26px of the * content width at a 320px viewport, and a font fallback would push it past. * An extra line break is strictly better than a horizontal scrollbar. */ .nowrap{white-space:normal} /* * The bands are no longer set here. R2/P2 used to tighten .hero and * .page-hero at this width by hand, each with its own pixel pair; both now * step with every other band through the --band tokens at the top of the * file, which also added the 960px tier they never had. */ /* Hands the TV-guide panel back ~12px of text width at the narrow tier. */ .screen{padding:16px} /* Less horizontal travel in the now-scrolling comparison table. */ .table-scroll table{font-size:.88rem} .g2,.g3,.g4{grid-template-columns:1fr} /* * .g3's single-column tier exists so a three-card section never leaves an * orphan. A full page of post cards is a different case — .grid-dense keeps * two columns down to the narrowest tier rather than stacking ten cards. */ .grid-dense{grid-template-columns:repeat(2,1fr)} /* Post cards carry far more content than channel or guide cards, so they take the full column here rather than sharing it. */ .grid-posts{grid-template-columns:1fr} /* * 16px exactly. Safari on iOS zooms the viewport whenever a focused input * is set below 16px, which leaves the visitor pinching back out of a * horizontally scrolling page after tapping the category search. Scoped to * this tier so the desktop field is unchanged. */ .filter-bar input{font-size:1rem} .stat-band{grid-template-columns:repeat(2,1fr);padding:26px 16px;gap:14px 10px} .stat span{font-size:.76rem} .foot-grid{grid-template-columns:1fr} .cta-band{padding:44px 24px} } @media(max-width:460px){ .grid-dense{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} } /* ------------------------------------------------------------------------- * Responsive fixes (measured audit, 320–1920px) * ---------------------------------------------------------------------- */ /* Scroll boxes contain the table's absolutely positioned screen-reader caption, which otherwise escapes and widens the page on phones. */ .table-scroll{position:relative} /* Grid items may shrink below their content's intrinsic width; form controls never exceed their field (the contact form was 36px too wide at 320px). */ .grid>*,.form-card{min-width:0} .form-card input,.form-card select,.form-card textarea{max-width:100%} .form-card select{width:100%} /* Stand-alone links get a comfortable tap height without changing their look. */ .foot-base a{display:inline-block;padding:12px 0} .back-link{padding:10px 0} .sum-change{padding:10px 0} @media (max-width:600px){.plan-flag{font-size:12px}} /* ------------------------------------------------------------------------- * Icon system: line icons instead of the triangle glyph. * .tri in lists and chips -> check mark * .tri in buttons / menu -> arrow, after the label * feature cards -> a distinct icon each (feature_card()) * step cards -> check in a circle * section kicker -> a short accent rule * ---------------------------------------------------------------------- */ .tri{clip-path:none;width:15px;height:15px;background:var(--gold);transform:none; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat} .chip .tri{background:var(--gold);width:14px;height:14px} .plan li{align-items:flex-start} .plan li .tri{background:var(--gold);width:15px;height:15px;margin-top:4px;transform:none} .btn .tri,.nav-trial .tri{order:2;width:1em;height:1em;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat} .btn-blue .tri{background:currentColor} .nav-trial a{display:flex;align-items:center;gap:8px} .icon-play{color:var(--gold)} .icon-play .ip-icon{display:block} .icon-play .tri{width:16px;height:16px; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .step{padding-left:30px} .step::before{clip-path:none;width:19px;height:19px;top:3px;background:var(--gold); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E") center/contain no-repeat} .eyebrow::before{width:22px;height:2px;border-radius:2px;background:var(--gold)} /* Hero illustration */ .hero-visual .hero-art{display:block;width:100%;max-width:560px;height:auto;margin-inline:auto} .hero-art-live{animation:heroLive 1.6s ease-in-out infinite} .hero-art-play circle:first-child{transform-origin:250px 196px;animation:heroRing 2.4s ease-out infinite} @keyframes heroLive{50%{opacity:.25}} @keyframes heroRing{0%{transform:scale(.8);opacity:.35}70%{transform:scale(1.25);opacity:0}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.hero-art-live,.hero-art-play circle:first-child{animation:none}} /* ------------------------------------------------------------------------- * Closing CTA band, redesigned (owner, 2026-09-29) * * One helper, cta_band(), draws every CTA on the site, so this block is the * whole redesign. The old band was a flat red gradient rectangle with streaks; * this is a dark card with a warm glow, a dashed ticket ring, scattered * confetti and a pill button that lifts on hover. Copy and link are untouched. * ---------------------------------------------------------------------- */ .cta-band{ position:relative;overflow:hidden;isolation:isolate;text-align:center; padding:64px 40px;border-radius:30px; border:1px solid var(--line-gold); background: radial-gradient(120% 150% at 50% -30%,rgba(232,89,91,.28),transparent 62%), linear-gradient(165deg,#1B1414 0%,var(--ink) 58%); box-shadow:0 26px 60px -34px rgba(192,40,42,.9); } /* The ticket ring: a dashed outline inside the card's own edge. */ .cta-band::before{ content:"";position:absolute;inset:13px;z-index:-1;pointer-events:none; border:2px dashed rgba(232,89,91,.26);border-radius:20px; } .cta-confetti{ position:absolute;inset:0;width:100%;height:100%;z-index:-2; opacity:.55;pointer-events:none; } .cta-badge{ width:54px;height:54px;border-radius:50%;margin:0 auto 18px; display:flex;align-items:center;justify-content:center; background:rgba(232,89,91,.14);border:1px solid var(--line-gold); box-shadow:0 0 0 10px rgba(232,89,91,.06); } .cta-badge .tri{width:19px;height:19px} .cta-band h2{color:#fff;font-size:clamp(1.55rem,3.3vw,2.25rem);line-height:1.15} .cta-band p{color:rgba(244,241,239,.84);max-width:560px;margin:14px auto 30px} .cta-btn{ background:linear-gradient(135deg,var(--gold),var(--blue)); color:#fff;border-radius:999px;padding:15px 32px;font-size:1.02rem; box-shadow:0 12px 28px -10px rgba(192,40,42,.85); } .cta-btn:hover{box-shadow:0 18px 34px -10px rgba(192,40,42,.95)} .cta-btn .tri{background:#fff} @media (max-width:600px){ .cta-band{padding:44px 20px;border-radius:24px} .cta-band::before{inset:9px;border-radius:16px} .cta-badge{width:46px;height:46px;margin-bottom:14px} } /* ------------------------------------------------------------------------- * Home page, redesigned (owner, 2026-09-29): playful, rounder, warmer. * * EVERY selector here is prefixed with `.home`, the body class WordPress puts * on the front page only. The eight home patterns share their card markup with * the inner pages (feature_card, plan_card, step_card, section_head), so an * unscoped rule would redesign the whole site. The owner asked for the home * page and nothing else, and this prefix is what enforces that. * ---------------------------------------------------------------------- */ /* --- shared flourishes ------------------------------------------------- */ .home .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .home .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } @keyframes homePulse{50%{opacity:.35;box-shadow:0 0 0 7px rgba(232,89,91,.05)}} .home .section-head.center .eyebrow{margin-inline:auto} /* --- hero -------------------------------------------------------------- */ /* The accent words sit on a soft marker stroke instead of plain colour. */ /* Painted on the span itself, not a z-index:-1 pseudo-element: the hero owns a background of its own, so a negative layer disappeared behind it. */ .home .hero h1 .accent-i{ color:#fff;white-space:nowrap; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } .home .hero .chip{ border-radius:999px;padding:9px 16px; background:rgba(232,89,91,.09);border:1px solid var(--line-gold); } .home .hero-cta .btn{border-radius:999px;padding:15px 30px} .home .hero-cta .btn-blue{ background:linear-gradient(135deg,var(--gold),var(--blue)); box-shadow:0 12px 28px -10px rgba(192,40,42,.85); } .home .hero-cta .btn-blue:hover{box-shadow:0 18px 34px -10px rgba(192,40,42,.95)} .home .hero-cta .btn-ghost{border-color:var(--line-gold)} .home .hero-note{opacity:.85} /* --- stat band --------------------------------------------------------- */ .home .stat-band{ border-radius:26px;border:1px solid var(--line-gold); background:radial-gradient(120% 160% at 50% -40%,rgba(232,89,91,.22),transparent 60%),var(--panel); } .home .stat-band .stat b,.home .stat-band .stat strong,.home .stat b{ background:linear-gradient(120deg,#fff,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* --- cards: features, support, categories ------------------------------ */ .home .card,.home .cat-card{ border-radius:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .home .card:hover,.home .cat-card:hover{ transform:translateY(-4px);border-color:var(--line-gold); box-shadow:0 18px 38px -26px rgba(192,40,42,.9); } .home .card .icon-play{ width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(232,89,91,.13);border:1px solid var(--line-gold); } /* Support cards get a speech-bubble tail, because they quote messages. */ .home .testimonial-cards .card{position:relative} .home .testimonial-cards .card::after{ content:"";position:absolute;left:34px;bottom:-11px;width:20px;height:20px; background:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line); transform:rotate(45deg);border-bottom-right-radius:4px; } /* --- three steps ------------------------------------------------------- */ .home .steps-playful .step{ background:var(--ink);border:1px dashed rgba(232,89,91,.3); border-radius:22px;padding:24px 22px 24px 52px; } .home .steps-playful .step::before{left:20px;top:26px} /* --- plans ------------------------------------------------------------- */ .home .plan{border-radius:24px;transition:transform .18s ease,box-shadow .18s ease} .home .plan:hover{transform:translateY(-4px)} .home .plan.hot{ border-color:var(--line-gold); background:radial-gradient(120% 130% at 50% -25%,rgba(232,89,91,.2),transparent 62%),var(--panel); box-shadow:0 22px 50px -30px rgba(192,40,42,.95); } /* The "most popular" flag becomes a sticker pinned to the corner. */ .home .plan-flag{font-size:12px} .home .plan.hot .plan-flag{ border-radius:999px;padding:6px 14px;transform:rotate(-3deg); background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; box-shadow:0 8px 18px -8px rgba(192,40,42,.9); } .home .plan .plan-price{ background:linear-gradient(120deg,#fff,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } .home .plan .btn{border-radius:999px} .home .plan.hot .btn-blue{background:linear-gradient(135deg,var(--gold),var(--blue))} @media (max-width:600px){ .home .hero h1 .accent-i{white-space:normal} .home .stat-band,.home .plan,.home .card,.home .cat-card{border-radius:18px} .home .steps-playful .step{padding:20px 18px 20px 46px} } @media (prefers-reduced-motion:reduce){ .home .eyebrow::before{animation:none} .home .card,.home .cat-card,.home .plan{transition:none} } /* ------------------------------------------------------------------------- * Pricing page, redesigned (owner, 2026-09-29): the home page's vocabulary, * applied to plans, the comparison table and the billing questions. * * Scoped to `.pg-pricing`, the slug class added in functions.php. The plan * cards, table and accordions are shared markup, so an unscoped rule would * change the reseller, channels and FAQ pages too. * ---------------------------------------------------------------------- */ .pg-pricing .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-pricing .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .pg-pricing .section-head.center .eyebrow{margin-inline:auto} /* The price in the page heading, on the same marker stroke as the home hero. */ .pg-pricing .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* --- plan cards -------------------------------------------------------- */ .pg-pricing .plan{border-radius:24px;transition:transform .18s ease,box-shadow .18s ease} .pg-pricing .plan:hover{transform:translateY(-4px)} .pg-pricing .plan.hot{ border-color:var(--line-gold); background:radial-gradient(120% 130% at 50% -25%,rgba(232,89,91,.2),transparent 62%),var(--panel); box-shadow:0 22px 50px -30px rgba(192,40,42,.95); } .pg-pricing .plan-flag{font-size:12px} .pg-pricing .plan.hot .plan-flag{ border-radius:999px;padding:6px 14px;transform:rotate(-3deg); background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; box-shadow:0 8px 18px -8px rgba(192,40,42,.9); } .pg-pricing .plan .plan-price{ background:linear-gradient(120deg,#fff,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } .pg-pricing .plan .btn{border-radius:999px} .pg-pricing .plan.hot .btn-blue{background:linear-gradient(135deg,var(--gold),var(--blue))} /* --- comparison table -------------------------------------------------- */ .pg-pricing .table-scroll{ border-radius:24px;border-color:var(--line-gold); background:radial-gradient(120% 200% at 50% -60%,rgba(232,89,91,.14),transparent 55%),var(--panel); } .pg-pricing thead th{color:var(--gold);background:rgba(232,89,91,.07)} .pg-pricing tbody tr:nth-child(odd){background:rgba(255,255,255,.015)} .pg-pricing tbody tr:hover{background:rgba(232,89,91,.06)} .pg-pricing tbody tr:last-child th,.pg-pricing tbody tr:last-child td{border-bottom:0} /* Each tick sits in its own soft disc, so a row scans at a glance. */ .pg-pricing .is-yes{ display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%; background:rgba(232,89,91,.14);border:1px solid var(--line-gold); } .pg-pricing .is-no{opacity:.5} /* --- billing questions ------------------------------------------------- */ .pg-pricing .acc{ border-radius:18px;border-color:rgba(232,89,91,.22); transition:border-color .18s ease,box-shadow .18s ease; } .pg-pricing .acc:hover{border-color:var(--line-gold);box-shadow:0 14px 30px -26px rgba(192,40,42,.9)} .pg-pricing .acc[open]{ border-color:var(--line-gold); background:radial-gradient(120% 180% at 50% -40%,rgba(232,89,91,.12),transparent 60%),var(--panel); } .pg-pricing .acc summary::after{ width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(232,89,91,.14);border:1px solid var(--line-gold); font-size:1.05rem;line-height:1; } @media (max-width:600px){ .pg-pricing .plan,.pg-pricing .table-scroll{border-radius:18px} .pg-pricing .acc{border-radius:14px} } @media (prefers-reduced-motion:reduce){ .pg-pricing .eyebrow::before{animation:none} .pg-pricing .plan,.pg-pricing .acc{transition:none} } /* ------------------------------------------------------------------------- * Reseller page, redesigned (owner, 2026-09-29): the same vocabulary again, * scoped to `.pg-reseller`. Benefit cards, credit packs and the three steps * share their markup with other pages, hence the prefix on every rule. * ---------------------------------------------------------------------- */ .pg-reseller .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-reseller .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .pg-reseller .section-head.center .eyebrow{margin-inline:auto} .pg-reseller .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* --- benefit cards ----------------------------------------------------- */ .pg-reseller .card{ border-radius:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .pg-reseller .card:hover{ transform:translateY(-4px);border-color:var(--line-gold); box-shadow:0 18px 38px -26px rgba(192,40,42,.9); } .pg-reseller .card .icon-play{ width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(232,89,91,.13);border:1px solid var(--line-gold); } /* --- credit packs ------------------------------------------------------ */ .pg-reseller .plan{border-radius:24px;transition:transform .18s ease,box-shadow .18s ease} .pg-reseller .plan:hover{transform:translateY(-4px)} .pg-reseller .plan-flag{font-size:12px} .pg-reseller .plan.hot{ border-color:var(--line-gold); background:radial-gradient(120% 130% at 50% -25%,rgba(232,89,91,.2),transparent 62%),var(--panel); box-shadow:0 22px 50px -30px rgba(192,40,42,.95); } .pg-reseller .plan.hot .plan-flag{ border-radius:999px;padding:6px 14px;transform:rotate(-3deg); background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; box-shadow:0 8px 18px -8px rgba(192,40,42,.9); } .pg-reseller .plan .plan-price{ background:linear-gradient(120deg,#fff,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } .pg-reseller .plan .btn{border-radius:999px} .pg-reseller .plan.hot .btn-blue{background:linear-gradient(135deg,var(--gold),var(--blue))} /* --- the three steps --------------------------------------------------- */ .pg-reseller .grid.g3 .step{ background:var(--ink);border:1px dashed rgba(232,89,91,.3); border-radius:22px;padding:24px 22px 24px 52px; } .pg-reseller .grid.g3 .step::before{left:20px;top:26px} @media (max-width:600px){ .pg-reseller .plan,.pg-reseller .card{border-radius:18px} .pg-reseller .grid.g3 .step{padding:20px 18px 20px 46px} } @media (prefers-reduced-motion:reduce){ .pg-reseller .eyebrow::before{animation:none} .pg-reseller .card,.pg-reseller .plan{transition:none} } /* ------------------------------------------------------------------------- * Blog index, redesigned (owner, 2026-09-29). * * Scoped to `.blog`, the class the platform puts on the posts index alone. * `archive-body.php` also serves category archives, tags and search, and those * keep the original design: only this class and the `is_home()` branches in * that file touch the blog. * ---------------------------------------------------------------------- */ .blog .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .blog .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .blog .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* --- post cards -------------------------------------------------------- */ .blog .post-card{ border-radius:22px;overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .blog .post-card:hover{ transform:translateY(-4px);border-color:var(--line-gold); box-shadow:0 18px 38px -26px rgba(192,40,42,.9); } .blog .post-card .post-thumb{border-radius:0} .blog .post-card .post-tag{ align-self:flex-start;width:fit-content; border-radius:999px;padding:5px 12px; background:rgba(232,89,91,.14);border:1px solid var(--line-gold);color:var(--gold); } .blog .post-pagination a,.blog .post-pagination span{border-radius:999px} .blog .post-pagination .current{background:linear-gradient(135deg,var(--gold),var(--blue));border-color:transparent} /* --- the empty state --------------------------------------------------- */ .blog .blog-empty{ position:relative;text-align:center;max-width:640px;margin:0 auto; padding:52px 30px;border-radius:30px; border:1px solid var(--line-gold); background: radial-gradient(120% 150% at 50% -30%,rgba(232,89,91,.22),transparent 62%), linear-gradient(165deg,#1B1414 0%,var(--ink) 58%); box-shadow:0 26px 60px -34px rgba(192,40,42,.9); } .blog .blog-empty::before{ content:"";position:absolute;inset:13px;pointer-events:none; border:2px dashed rgba(232,89,91,.26);border-radius:20px; } .blog .blog-empty-badge{ width:54px;height:54px;border-radius:50%;margin:0 auto 18px; display:flex;align-items:center;justify-content:center; background:rgba(232,89,91,.14);border:1px solid var(--line-gold); box-shadow:0 0 0 10px rgba(232,89,91,.06); } .blog .blog-empty-badge .tri{width:19px;height:19px} .blog .blog-empty h3{color:#fff;font-size:1.45rem;margin:0} .blog .blog-empty p{color:rgba(244,241,239,.84);margin:12px auto 26px;max-width:460px} .blog .blog-empty-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .blog .blog-empty-cta .btn{border-radius:999px;padding:14px 28px} .blog .blog-empty-cta .btn-blue{ background:linear-gradient(135deg,var(--gold),var(--blue)); box-shadow:0 12px 28px -10px rgba(192,40,42,.85); } .blog .blog-empty-cta .btn-ghost{border-color:var(--line-gold)} @media (max-width:600px){ .blog .post-card{border-radius:18px} .blog .blog-empty{padding:38px 20px;border-radius:24px} .blog .blog-empty::before{inset:9px;border-radius:16px} } @media (prefers-reduced-motion:reduce){ .blog .eyebrow::before{animation:none} .blog .post-card{transition:none} } /* ------------------------------------------------------------------------- * Channels page, redesigned (owner, 2026-09-29). Scoped to `.pg-channels`: * the filter bar, category cards and on-demand cards are shared markup. * ---------------------------------------------------------------------- */ .pg-channels .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-channels .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .pg-channels .section-head.center .eyebrow{margin-inline:auto} .pg-channels .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* --- filter bar -------------------------------------------------------- */ .pg-channels .filter-bar input{ border-radius:999px;padding:13px 20px;border-color:rgba(232,89,91,.22); } .pg-channels .filter-bar input:focus{border-color:var(--gold);outline-offset:3px} .pg-channels .filter-bar .pill{ border-radius:999px;padding:11px 20px; border-color:rgba(232,89,91,.22);transition:transform .15s ease,background .15s ease; } .pg-channels .filter-bar .pill:hover{transform:translateY(-2px)} .pg-channels .filter-bar .pill.on{ background:linear-gradient(135deg,var(--gold),var(--blue)); border-color:transparent;color:#fff; box-shadow:0 10px 24px -12px rgba(192,40,42,.9); } /* --- category and on-demand cards -------------------------------------- */ .pg-channels .cat-card,.pg-channels .card{ border-radius:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .pg-channels .cat-card:hover,.pg-channels .card:hover{ transform:translateY(-4px);border-color:var(--line-gold); box-shadow:0 18px 38px -26px rgba(192,40,42,.9); } .pg-channels .card .icon-play{ width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(232,89,91,.13);border:1px solid var(--line-gold); } @media (max-width:600px){ .pg-channels .cat-card,.pg-channels .card{border-radius:18px} .pg-channels .filter-bar .pill{padding:10px 16px} } @media (prefers-reduced-motion:reduce){ .pg-channels .eyebrow::before{animation:none} .pg-channels .cat-card,.pg-channels .card,.pg-channels .filter-bar .pill{transition:none} } /* ------------------------------------------------------------------------- * FAQ page, redesigned (owner, 2026-09-29). Scoped to `.pg-faq`: accordions * are shared markup, and the pricing page has its own accordion treatment. * * The questions and answers are untouched: `inc/schema.php` builds the FAQPage * structured data from the same array, and Google requires the visible answer * and the marked-up answer to match. * ---------------------------------------------------------------------- */ .pg-faq .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-faq .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .pg-faq .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* Each group heading is an .eyebrow h2; centre it over its own stack. */ .pg-faq .faq-group .section-head{text-align:center} .pg-faq .faq-group{margin-bottom:46px} /* --- accordions -------------------------------------------------------- */ .pg-faq .acc{ border-radius:18px;border-color:rgba(232,89,91,.22); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .pg-faq .acc:hover{ border-color:var(--line-gold);transform:translateY(-2px); box-shadow:0 14px 30px -26px rgba(192,40,42,.9); } .pg-faq .acc[open]{ border-color:var(--line-gold); background:radial-gradient(120% 180% at 50% -40%,rgba(232,89,91,.12),transparent 60%),var(--panel); } .pg-faq .acc summary::after{ width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(232,89,91,.14);border:1px solid var(--line-gold); font-size:1.05rem;line-height:1;flex:none; } @media (max-width:600px){ .pg-faq .acc{border-radius:14px} .pg-faq .faq-group{margin-bottom:34px} } @media (prefers-reduced-motion:reduce){ .pg-faq .eyebrow::before{animation:none} .pg-faq .acc{transition:none} } /* ------------------------------------------------------------------------- * Free trial page, redesigned (owner, 2026-09-29). Scoped to `.pg-free-trial`. * * The form markup is shared with /checkout/ on purpose (same renderers, same * validation in app.js), so every rule here is prefixed: the checkout form * must keep the design it has. Only appearance changes; ids, names and classes * the script and the REST payload depend on are untouched. * ---------------------------------------------------------------------- */ .pg-free-trial .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-free-trial .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .pg-free-trial .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* --- the form card ----------------------------------------------------- */ .pg-free-trial .form-card{ border-radius:28px;border-color:var(--line-gold); background: radial-gradient(120% 130% at 50% -25%,rgba(232,89,91,.16),transparent 60%), var(--panel); box-shadow:0 26px 60px -38px rgba(192,40,42,.9); } /* The numbered step markers become gradient discs. */ .pg-free-trial .form-step::before{ width:30px;height:30px;color:#fff; background:linear-gradient(135deg,var(--gold),var(--blue)); box-shadow:0 8px 18px -10px rgba(192,40,42,.9); } .pg-free-trial .form-card input, .pg-free-trial .form-card select, .pg-free-trial .form-card textarea{ border-radius:14px;border-color:rgba(232,89,91,.28); } .pg-free-trial .form-card input:focus, .pg-free-trial .form-card select:focus, .pg-free-trial .form-card textarea:focus{border-color:var(--gold)} .pg-free-trial .form-accuracy-note{ border-left:0;border-radius:14px;padding:12px 14px; border:1px dashed rgba(232,89,91,.3); } .pg-free-trial .trial-submit{ border-radius:999px;padding:16px 30px;font-size:1.02rem; background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; box-shadow:0 14px 30px -12px rgba(192,40,42,.9); } .pg-free-trial .trial-submit:hover{box-shadow:0 20px 38px -12px rgba(192,40,42,1)} /* --- the thank-you panel ----------------------------------------------- */ .pg-free-trial .form-ok{ border-radius:28px; background: radial-gradient(120% 150% at 50% -30%,rgba(232,89,91,.22),transparent 62%), linear-gradient(165deg,#1B1414 0%,var(--ink) 58%); box-shadow:0 26px 60px -34px rgba(192,40,42,.9); } .pg-free-trial .ok-badge{ background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; box-shadow:0 0 0 10px rgba(232,89,91,.08); } .pg-free-trial .form-ok .btn{ border-radius:999px;padding:15px 30px; background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; } @media (max-width:600px){ .pg-free-trial .form-card,.pg-free-trial .form-ok{border-radius:20px} } @media (prefers-reduced-motion:reduce){ .pg-free-trial .eyebrow::before{animation:none} } /* ------------------------------------------------------------------------- * About page, redesigned (owner, 2026-09-29). Scoped to `.pg-about`: the * `.article` reading column and the stat band are shared with the legal pages * and the home page. * ---------------------------------------------------------------------- */ .pg-about .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-about .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .pg-about .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* Each section of the story sits on its own soft card. */ .pg-about .article h2{ display:inline-block;margin-top:2.4em;padding:7px 16px;border-radius:999px; font-size:1.05rem;letter-spacing:.02em; background:rgba(232,89,91,.12);border:1px solid var(--line-gold);color:var(--gold); } .pg-about .article h2:first-child{margin-top:0} /* The four promises become ticked cards rather than bullet points. */ .pg-about .article ul{list-style:none;padding:0;display:grid;gap:12px;margin:18px 0 0} .pg-about .article ul li{ position:relative;margin:0;padding:18px 20px 18px 52px; border:1px solid var(--line);border-radius:20px;background:var(--panel); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .pg-about .article ul li:hover{ transform:translateY(-3px);border-color:var(--line-gold); box-shadow:0 16px 34px -28px rgba(192,40,42,.9); } .pg-about .article ul li::before{ content:"";position:absolute;left:18px;top:20px;width:20px;height:20px; background:var(--gold); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E") center/contain no-repeat; } .pg-about .article ul li b{color:#fff} /* The shared figures band, with the home page's treatment. */ .pg-about .stat-band{ border-radius:26px;border:1px solid var(--line-gold); background:radial-gradient(120% 160% at 50% -40%,rgba(232,89,91,.22),transparent 60%),var(--panel); } .pg-about .stat-band .stat b,.pg-about .stat b{ background:linear-gradient(120deg,#fff,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } @media (max-width:600px){ .pg-about .article ul li{border-radius:16px;padding:16px 16px 16px 46px} .pg-about .article ul li::before{left:14px;top:18px} .pg-about .stat-band{border-radius:18px} } @media (prefers-reduced-motion:reduce){ .pg-about .eyebrow::before{animation:none} .pg-about .article ul li{transition:none} } /* ------------------------------------------------------------------------- * Contact page, redesigned (owner, 2026-09-29). Scoped to `.pg-contact`: the * form card, the `.card` sidebar and the success panel are shared markup. * The contact form posts to the theme's own endpoint; ids, names and the * reCAPTCHA container are untouched, only appearance changes. * ---------------------------------------------------------------------- */ .pg-contact .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-contact .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .pg-contact .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* --- the message form -------------------------------------------------- */ .pg-contact .form-card{ border-radius:28px;border-color:var(--line-gold); background: radial-gradient(120% 130% at 50% -25%,rgba(232,89,91,.16),transparent 60%), var(--panel); box-shadow:0 26px 60px -38px rgba(192,40,42,.9); } .pg-contact .form-card input, .pg-contact .form-card select, .pg-contact .form-card textarea{ border-radius:14px;border-color:rgba(232,89,91,.28); } .pg-contact .form-card input:focus, .pg-contact .form-card select:focus, .pg-contact .form-card textarea:focus{border-color:var(--gold)} .pg-contact .form-accuracy-note{ border-left:0;border-radius:14px;padding:12px 14px; border:1px dashed rgba(232,89,91,.3); } .pg-contact .form-card button[type="submit"]{ border-radius:999px;padding:16px 30px;font-size:1.02rem; background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; box-shadow:0 14px 30px -12px rgba(192,40,42,.9); } .pg-contact .form-card button[type="submit"]:hover{box-shadow:0 20px 38px -12px rgba(192,40,42,1)} .pg-contact .form-ok{ border-radius:24px; background: radial-gradient(120% 150% at 50% -30%,rgba(232,89,91,.2),transparent 62%), linear-gradient(165deg,#1B1414 0%,var(--ink) 58%); } /* --- the sidebar cards ------------------------------------------------- */ .pg-contact .card{ border-radius:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .pg-contact .card:hover{ transform:translateY(-3px);border-color:var(--line-gold); box-shadow:0 16px 34px -28px rgba(192,40,42,.9); } /* "What happens after you press send" reads as numbered steps. */ .pg-contact .card ol{list-style:none;padding:0;counter-reset:contactstep} .pg-contact .card ol li{ counter-increment:contactstep;position:relative;padding-left:38px; } .pg-contact .card ol li::before{ content:counter(contactstep);position:absolute;left:0;top:-1px; width:26px;height:26px;border-radius:50%;display:grid;place-items:center; font-family:var(--disp);font-weight:800;font-size:.8rem;color:#fff; background:linear-gradient(135deg,var(--gold),var(--blue)); } @media (max-width:600px){ .pg-contact .form-card{border-radius:20px} .pg-contact .card{border-radius:18px} /* The support address is one long unbreakable token on a 320px screen. */ .pg-contact .card a{overflow-wrap:anywhere} } @media (prefers-reduced-motion:reduce){ .pg-contact .eyebrow::before{animation:none} .pg-contact .card{transition:none} } /* ------------------------------------------------------------------------- * Privacy Policy, redesigned (owner, 2026-09-29). Scoped to * `.pg-privacy-policy`: `legal-body.php` and the `.article` column are shared * with Terms and the Refund Policy, which keep the plain document styling. * * The policy text itself is untouched. It is a legal document, so this changes * only how it is presented. * ---------------------------------------------------------------------- */ .pg-privacy-policy .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-privacy-policy .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } /* The opening paragraph is the policy's own plain-English summary, so it is lifted out of the body text into a card. */ .pg-privacy-policy .article .entry-content > p:first-child{ position:relative;margin:0 0 8px;padding:26px 28px;border-radius:24px; color:var(--txt);font-size:1.04rem;line-height:1.7; border:1px solid var(--line-gold); background: radial-gradient(120% 150% at 50% -30%,rgba(232,89,91,.18),transparent 62%), linear-gradient(165deg,#1B1414 0%,var(--ink) 58%); box-shadow:0 22px 50px -38px rgba(192,40,42,.9); } /* Section headings as pills, matching the About page. */ .pg-privacy-policy .article h2{ display:inline-block;margin-top:2.4em;padding:7px 16px;border-radius:999px; font-size:1.05rem;letter-spacing:.02em; background:rgba(232,89,91,.12);border:1px solid var(--line-gold);color:var(--gold); } /* Clauses as cards rather than bullets: each one is a separate promise. */ .pg-privacy-policy .article ul{list-style:none;padding:0;display:grid;gap:10px;margin:16px 0 0} .pg-privacy-policy .article ul li{ position:relative;margin:0;padding:16px 18px 16px 46px; border:1px solid var(--line);border-radius:18px;background:var(--panel); transition:border-color .18s ease; } .pg-privacy-policy .article ul li:hover{border-color:var(--line-gold)} .pg-privacy-policy .article ul li::before{ content:"";position:absolute;left:18px;top:22px;width:9px;height:9px; border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,89,91,.14); } .pg-privacy-policy .article ul li b{color:#fff} @media (max-width:600px){ .pg-privacy-policy .article .entry-content > p:first-child{padding:20px;border-radius:18px} .pg-privacy-policy .article ul li{border-radius:14px;padding:14px 14px 14px 40px} .pg-privacy-policy .article ul li::before{left:15px;top:20px} } @media (prefers-reduced-motion:reduce){ .pg-privacy-policy .eyebrow::before{animation:none} .pg-privacy-policy .article ul li{transition:none} } /* ------------------------------------------------------------------------- * Terms of Service, redesigned (owner, 2026-09-29). Scoped to * `.pg-terms-of-service`; the Refund Policy keeps the plain document look. * The terms themselves are unchanged: this is presentation only. * ---------------------------------------------------------------------- */ .pg-terms-of-service .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-terms-of-service .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } /* Numbered clause headings as pills. The numbers are part of the heading text in the document, so they simply sit inside the pill. */ .pg-terms-of-service .article h2{ display:inline-block;margin-top:2.2em;padding:7px 16px;border-radius:999px; font-size:1.02rem;letter-spacing:.02em; background:rgba(232,89,91,.12);border:1px solid var(--line-gold);color:var(--gold); } .pg-terms-of-service .article .entry-content > h2:first-child{margin-top:0} /* A spine down the clause body, so each paragraph reads as belonging to the heading above it rather than floating between two. */ .pg-terms-of-service .article .entry-content > p{ border-left:2px solid rgba(232,89,91,.22); padding:2px 0 2px 18px;margin-left:4px; } .pg-terms-of-service .article .entry-content > ul, .pg-terms-of-service .article .entry-content > ol{ border-left:2px solid rgba(232,89,91,.22); padding-left:38px;margin-left:4px; } .pg-terms-of-service .article a{text-underline-offset:3px} @media (max-width:600px){ .pg-terms-of-service .article .entry-content > p{padding-left:14px} .pg-terms-of-service .article .entry-content > ul, .pg-terms-of-service .article .entry-content > ol{padding-left:32px} } @media (prefers-reduced-motion:reduce){ .pg-terms-of-service .eyebrow::before{animation:none} } /* ------------------------------------------------------------------------- * Refund Policy, redesigned (owner, 2026-09-29). Scoped to * `.pg-refund-policy`. Text unchanged: presentation only, like the other two * legal pages. The page has one eligibility list and one numbered procedure, * so each gets the treatment that suits it. * ---------------------------------------------------------------------- */ .pg-refund-policy .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-refund-policy .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } /* The opening paragraph is the advice that saves a refund request entirely (try the free trial first), so it leads as a card. */ .pg-refund-policy .article .entry-content > p:first-child{ position:relative;margin:0 0 8px;padding:26px 28px;border-radius:24px; color:var(--txt);font-size:1.04rem;line-height:1.7; border:1px solid var(--line-gold); background: radial-gradient(120% 150% at 50% -30%,rgba(232,89,91,.18),transparent 62%), linear-gradient(165deg,#1B1414 0%,var(--ink) 58%); box-shadow:0 22px 50px -38px rgba(192,40,42,.9); } .pg-refund-policy .article h2{ display:inline-block;margin-top:2.4em;padding:7px 16px;border-radius:999px; font-size:1.05rem;letter-spacing:.02em; background:rgba(232,89,91,.12);border:1px solid var(--line-gold);color:var(--gold); } /* Who qualifies: each rule its own card, because each is a separate condition a reader checks themselves against. */ .pg-refund-policy .article ul{list-style:none;padding:0;display:grid;gap:10px;margin:16px 0 0} .pg-refund-policy .article ul li{ position:relative;margin:0;padding:16px 18px 16px 46px; border:1px solid var(--line);border-radius:18px;background:var(--panel); } .pg-refund-policy .article ul li::before{ content:"";position:absolute;left:18px;top:22px;width:9px;height:9px; border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,89,91,.14); } .pg-refund-policy .article ul li b{color:#fff} /* How to ask: a numbered procedure, so the numbers become discs. */ .pg-refund-policy .article ol{list-style:none;padding:0;counter-reset:refundstep;display:grid;gap:10px;margin:16px 0 0} .pg-refund-policy .article ol li{ counter-increment:refundstep;position:relative;margin:0; padding:16px 18px 16px 56px; border:1px solid var(--line);border-radius:18px;background:var(--panel); } .pg-refund-policy .article ol li::before{ content:counter(refundstep);position:absolute;left:16px;top:15px; width:28px;height:28px;border-radius:50%;display:grid;place-items:center; font-family:var(--disp);font-weight:800;font-size:.85rem;color:#fff; background:linear-gradient(135deg,var(--gold),var(--blue)); } @media (max-width:600px){ .pg-refund-policy .article .entry-content > p:first-child{padding:20px;border-radius:18px} .pg-refund-policy .article ul li{border-radius:14px;padding:14px 14px 14px 40px} .pg-refund-policy .article ul li::before{left:15px;top:20px} .pg-refund-policy .article ol li{border-radius:14px;padding:14px 14px 14px 50px} .pg-refund-policy .article ol li::before{left:12px;top:13px} } @media (prefers-reduced-motion:reduce){ .pg-refund-policy .eyebrow::before{animation:none} } /* ------------------------------------------------------------------------- * Checkout, redesigned (owner, 2026-09-29). Scoped to `.pg-checkout`. * * This is the page where people pay, so the form's wiring is untouched: ids, * names, `data-plan`, the total on the button and the reCAPTCHA container all * stay exactly as `app.js` and the `ssm/v1/order` route expect. The plan cards * shown when no plan is chosen use the shared `.plan` markup, hence the prefix. * ---------------------------------------------------------------------- */ .pg-checkout .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .pg-checkout .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } .pg-checkout .page-hero h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } /* --- plan chooser (no plan in the URL) --------------------------------- */ .pg-checkout .plan{border-radius:24px;transition:transform .18s ease,box-shadow .18s ease} .pg-checkout .plan:hover{transform:translateY(-4px)} .pg-checkout .plan-flag{font-size:12px} .pg-checkout .plan.hot{ border-color:var(--line-gold); background:radial-gradient(120% 130% at 50% -25%,rgba(232,89,91,.2),transparent 62%),var(--panel); box-shadow:0 22px 50px -30px rgba(192,40,42,.95); } .pg-checkout .plan.hot .plan-flag{ border-radius:999px;padding:6px 14px;transform:rotate(-3deg); background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; } .pg-checkout .plan .plan-price{ background:linear-gradient(120deg,#fff,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } .pg-checkout .plan .btn{border-radius:999px} .pg-checkout .plan.hot .btn-blue{background:linear-gradient(135deg,var(--gold),var(--blue))} /* --- order summary ----------------------------------------------------- */ .pg-checkout .order-summary{ border-radius:24px;padding:24px 26px; background: radial-gradient(120% 160% at 50% -40%,rgba(232,89,91,.2),transparent 60%), var(--panel); box-shadow:0 20px 44px -34px rgba(192,40,42,.9); } .pg-checkout .sum-price{ background:linear-gradient(120deg,#fff,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* --- the order form ---------------------------------------------------- */ .pg-checkout .form-card{ border-radius:28px;border-color:var(--line-gold); background: radial-gradient(120% 130% at 50% -25%,rgba(232,89,91,.16),transparent 60%), var(--panel); box-shadow:0 26px 60px -38px rgba(192,40,42,.9); } .pg-checkout .form-step::before{ width:30px;height:30px;color:#fff; background:linear-gradient(135deg,var(--gold),var(--blue)); box-shadow:0 8px 18px -10px rgba(192,40,42,.9); } .pg-checkout .form-card input, .pg-checkout .form-card select, .pg-checkout .form-card textarea{border-radius:14px;border-color:rgba(232,89,91,.28)} .pg-checkout .form-card input:focus, .pg-checkout .form-card select:focus, .pg-checkout .form-card textarea:focus{border-color:var(--gold)} .pg-checkout .form-accuracy-note{ border-left:0;border-radius:14px;padding:12px 14px; border:1px dashed rgba(232,89,91,.3); } .pg-checkout .checkout-submit{ border-radius:999px;padding:16px 30px;font-size:1.02rem; background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; box-shadow:0 14px 30px -12px rgba(192,40,42,.9); } .pg-checkout .checkout-submit:hover{box-shadow:0 20px 38px -12px rgba(192,40,42,1)} /* --- the confirmation -------------------------------------------------- */ .pg-checkout .form-ok{ border-radius:28px; background: radial-gradient(120% 150% at 50% -30%,rgba(232,89,91,.22),transparent 62%), linear-gradient(165deg,#1B1414 0%,var(--ink) 58%); box-shadow:0 26px 60px -34px rgba(192,40,42,.9); } .pg-checkout .ok-badge{ background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; box-shadow:0 0 0 10px rgba(232,89,91,.08); } .pg-checkout .form-ok .btn{ border-radius:999px;padding:15px 30px; background:linear-gradient(135deg,var(--gold),var(--blue));color:#fff; } @media (max-width:600px){ .pg-checkout .form-card,.pg-checkout .form-ok{border-radius:20px} .pg-checkout .order-summary,.pg-checkout .plan{border-radius:18px} } @media (prefers-reduced-motion:reduce){ .pg-checkout .eyebrow::before{animation:none} .pg-checkout .plan{transition:none} } /* Pricing: "included everywhere" chips, which carry the facts the comparison table used to hold for every column. */ .pg-pricing .included-chips{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px; } .pg-pricing .included-chips li{ display:flex;align-items:center;gap:11px;margin:0; padding:14px 18px;border-radius:999px; border:1px solid var(--line);background:var(--ink); font-size:.95rem;transition:border-color .18s ease,transform .18s ease; } .pg-pricing .included-chips li:hover{border-color:var(--line-gold);transform:translateY(-2px)} .pg-pricing .included-chips .tri{flex:none} @media (max-width:600px){.pg-pricing .included-chips li{padding:12px 16px;border-radius:16px}} @media (prefers-reduced-motion:reduce){.pg-pricing .included-chips li{transition:none}} /* ------------------------------------------------------------------------- * Single blog post, redesigned (owner, 2026-09-29). Scoped to `.single-post`, * the class the platform puts on a single post only: `page-header.php`, the * `.article` column and `post_card()` are all shared with other views. * ---------------------------------------------------------------------- */ .single-post .eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:7px 15px 7px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold);letter-spacing:.06em; } .single-post .eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(232,89,91,.18);animation:homePulse 2.4s ease-in-out infinite; } /* The featured image leads the article, so it earns a rounder frame and the same warm glow the cards use. */ .single-post .post-hero{ border-radius:24px;border-color:var(--line-gold); box-shadow:0 26px 60px -40px rgba(192,40,42,.9); } /* Body copy: headings get the accent rule, quotes and key lines stand out. */ .single-post .article h2{ display:flex;align-items:center;gap:12px;margin-top:2em;font-size:1.55rem; } .single-post .article h2::before{ content:"";flex:none;width:10px;height:26px;border-radius:999px; background:linear-gradient(180deg,var(--gold),var(--blue)); } .single-post .article h3{margin-top:1.6em} .single-post .article ul{list-style:none;padding:0;display:grid;gap:10px;margin:16px 0} .single-post .article ul li{ position:relative;margin:0;padding:14px 18px 14px 44px; border:1px solid var(--line);border-radius:16px;background:var(--panel); } .single-post .article ul li::before{ content:"";position:absolute;left:17px;top:20px;width:9px;height:9px; border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,89,91,.14); } .single-post .article ul li b{color:#fff} .single-post .article blockquote{ margin:24px 0;padding:20px 24px;border-radius:20px;border:1px dashed rgba(232,89,91,.35); background:rgba(232,89,91,.06);color:var(--txt); } .single-post .article a{text-underline-offset:3px} /* Related cards, matching the blog index. */ .single-post .post-card{ border-radius:22px;overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .single-post .post-card:hover{ transform:translateY(-4px);border-color:var(--line-gold); box-shadow:0 18px 38px -26px rgba(192,40,42,.9); } .single-post .post-card .post-tag{ align-self:flex-start;width:fit-content; border-radius:999px;padding:5px 12px; background:rgba(232,89,91,.14);border:1px solid var(--line-gold);color:var(--gold); } @media (max-width:600px){ .single-post .post-hero{border-radius:18px} .single-post .article h2{font-size:1.3rem} .single-post .post-card{border-radius:18px} } @media (prefers-reduced-motion:reduce){ .single-post .eyebrow::before{animation:none} .single-post .post-card{transition:none} } /* ========================================================================== Header and footer (owner, 2026-09-30) -------------------------------------------------------------------------- The last two parts of the site still wearing the kit's flat treatment. They render on every page, so every rule here is prefixed `.site-head` or `.site-foot`: `.nav-links` in particular is reused by `.post-pagination`, and `.contact-line` by the contact page, and neither may change. The bottom rule under the header is the same deep -> coral -> red gradient the featured images carry along their bottom edge. It is the cheapest way to make the chrome and the content read as one brand. ========================================================================== */ /* --- header --------------------------------------------------------------- */ .site-head{ background: radial-gradient(420px 120px at 88% 0%, rgba(192,40,42,.16), transparent 70%), rgba(14,14,14,.86); border-bottom:0; } /* The hairline, as a gradient. A border cannot hold one. */ .site-head::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg, rgba(154,31,33,0) 0%, var(--blue-deep) 12%, var(--gold) 50%, var(--blue) 82%, rgba(192,40,42,0) 100%); opacity:.85; } /* Brand: a soft halo that warms on hover, behind the logo rather than on it. */ .site-head .brand{position:relative;display:inline-flex;align-items:center;border-radius:12px} .site-head .brand-glow{ position:absolute;left:50%;top:50%;width:104px;height:104px; transform:translate(-50%,-50%) scale(.82); border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(232,89,91,.22),transparent 68%); opacity:0;transition:opacity .22s ease,transform .22s ease; } .site-head .brand:hover .brand-glow, .site-head .brand:focus-visible .brand-glow{opacity:1;transform:translate(-50%,-50%) scale(1)} .site-head .brand img{position:relative;transition:transform .22s ease} .site-head .brand:hover img{transform:translateY(-1px)} /* Nav: pill hover, and an active pill that carries the accent. */ .site-head .nav-links a{ position:relative;border-radius:999px;padding:9px 15px; transition:background .16s ease,color .16s ease; } .site-head .nav-links a:hover{background:rgba(232,89,91,.10);color:var(--gold)} .site-head .nav-links a.active{ color:var(--gold);background:rgba(232,89,91,.12); box-shadow:inset 0 0 0 1px var(--line-gold); } /* The dot only marks the page you are on, so it is information, not decoration. */ .site-head .nav-links a.active::after{ content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px; margin-left:-2px;border-radius:50%;background:var(--gold); } /* The header CTA: gradient pill with a live dot and an arrow that nudges. */ .site-head .nav-cta{ gap:10px;border-radius:999px;padding:11px 20px; background:linear-gradient(100deg,var(--blue),var(--gold)); color:#fff; box-shadow:0 6px 18px rgba(192,40,42,.28); transition:transform .16s ease,box-shadow .16s ease; } .site-head .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(192,40,42,.38); } .site-head .nav-cta .nav-cta-dot{ width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:headPulse 2.4s ease-in-out infinite; } .site-head .nav-cta .tri{transition:transform .16s ease} .site-head .nav-cta:hover .tri{transform:translateX(3px)} @keyframes headPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 50% {box-shadow:0 0 0 5px rgba(255,255,255,0)} } /* Burger */ .site-head .burger{ border-radius:12px;border-color:var(--line-gold); transition:background .16s ease,color .16s ease; } .site-head .burger:hover{background:rgba(232,89,91,.10);color:var(--gold)} .site-head .burger[aria-expanded="true"]{background:rgba(232,89,91,.14);color:var(--gold)} /* The note above the trial link is menu-only. */ .site-head .nav-note{display:none} @media (max-width:960px){ .site-head .nav-links{ border-radius:0 0 20px 20px; border:1px solid var(--line);border-top:0; box-shadow:0 22px 40px rgba(0,0,0,.45); gap:6px; } .site-head .nav-links a{padding:13px 14px} .site-head .nav-links a.active::after{display:none} .site-head .nav-note{ display:block;margin:10px 4px 2px; font-size:.82rem;color:var(--mut); } .site-head .nav-trial a{ justify-content:center;margin-top:4px; background:linear-gradient(100deg,var(--blue),var(--gold)); color:#fff;font-family:var(--disp);font-weight:800; border-radius:999px;padding:14px 18px; } .site-head .nav-trial a:hover{background:linear-gradient(100deg,var(--blue),var(--gold));color:#fff} } /* --- footer --------------------------------------------------------------- */ .site-foot{ position:relative;border-top:0; background: radial-gradient(620px 300px at 6% 0%, rgba(192,40,42,.10), transparent 62%), var(--panel); } .site-foot::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg, rgba(154,31,33,0) 0%, var(--blue-deep) 14%, var(--gold) 52%, var(--blue) 84%, rgba(192,40,42,0) 100%); opacity:.7; } .site-foot .foot-brand img{transition:transform .22s ease} .site-foot .foot-brand:hover img{transform:translateY(-1px)} /* Contact rows become chips: the icon gets a tinted tile so the three lines read as a set rather than as three sentences that happen to start with a picture. The markup is the contact page's and is not touched. */ .site-foot .foot-contact{display:grid;gap:8px;margin-top:16px} .site-foot .contact-line{ display:flex;align-items:center;gap:10px;margin:0; padding:9px 13px;border-radius:12px; background:rgba(14,14,14,.55); border:1px solid var(--line); font-size:.88rem; transition:border-color .16s ease,transform .16s ease; } .site-foot .contact-line:hover{border-color:var(--line-gold);transform:translateX(2px)} .site-foot .contact-line svg{ flex:0 0 auto;color:var(--gold); padding:5px;width:28px;height:28px;border-radius:8px; background:rgba(232,89,91,.12); } .site-foot .contact-line span{min-width:0;overflow-wrap:anywhere} /* `.foot-brand p` caps the blurb at 320px; the chips are `p` too, and the email address wrapped to two lines inside a chip because of it. */ .site-foot .foot-brand .contact-line{max-width:none} /* Column headings match the eyebrow used on every page. */ .site-foot .foot-col h2{ display:inline-flex;align-items:center;gap:8px; padding:6px 13px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); margin-bottom:14px; } .site-foot .foot-col h2::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--gold); } /* An arrow that slides in on hover, from a reserved gutter so nothing shifts. */ .site-foot .foot-col a{ position:relative;padding-left:16px; transition:color .16s ease,transform .16s ease; } .site-foot .foot-col a::before{ content:"";position:absolute;left:0;top:50%;margin-top:-3px; width:6px;height:6px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:rotate(-45deg) scale(.7); opacity:0;transition:opacity .16s ease,transform .16s ease; } .site-foot .foot-col a:hover::before{opacity:1;transform:rotate(-45deg) scale(1)} .site-foot .foot-col a:hover{transform:translateX(2px)} /* Base row */ .site-foot .foot-base{align-items:center} .site-foot .foot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .site-foot .foot-top, .site-foot .foot-trial{ display:inline-flex;align-items:center;gap:8px; border-radius:999px;padding:9px 16px; font-family:var(--disp);font-weight:700;font-size:.82rem; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } .site-foot .foot-top{ color:var(--mut);border:1px solid var(--line); } .site-foot .foot-top:hover{color:var(--gold);border-color:var(--line-gold);text-decoration:none} /* `.tri` is a check by default and only `.btn`/`.nav-trial` swap it for an arrow, so both of these have to name their own mask. Rotating the check was the first attempt and it renders as a tick lying on its side. */ .site-foot .foot-top .tri, .site-foot .foot-trial .tri{ width:14px;height:14px;background:currentColor;transform:none; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; } .site-foot .foot-top .tri{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E"); } .site-foot .foot-trial{ background:linear-gradient(100deg,var(--blue),var(--gold));color:#fff; box-shadow:0 6px 16px rgba(192,40,42,.26); } .site-foot .foot-trial:hover{ text-decoration:none;transform:translateY(-2px); box-shadow:0 10px 22px rgba(192,40,42,.36); } .site-foot .foot-trial .tri{transition:transform .16s ease} .site-foot .foot-trial:hover .tri{transform:translateX(3px)} @media (max-width:600px){ .site-foot .foot-base{gap:16px} .site-foot .foot-actions{width:100%} .site-foot .foot-trial{flex:1 1 auto;justify-content:center} } @media (prefers-reduced-motion:reduce){ .site-head .nav-cta,.site-head .nav-cta .tri,.site-head .brand img, .site-head .brand-glow,.site-foot .contact-line,.site-foot .foot-col a, .site-foot .foot-top,.site-foot .foot-trial,.site-foot .foot-trial .tri, .site-foot .foot-brand img{transition:none} .site-head .nav-cta .nav-cta-dot{animation:none} } /* ========================================================================== 404 (owner, 2026-09-30) -------------------------------------------------------------------------- Scoped to `.error404`, which WordPress already puts on the body, so no `body_class` entry is needed and nothing here can reach another template. Centred rather than left-aligned: a 404 has no column of content to lead the eye down, and the kit's layout left two thirds of the row empty. ========================================================================== */ .error404 .nf-wrap{padding:var(--band-hero-top) 0 var(--band)} .error404 .nf-head{max-width:680px;margin:0 auto;text-align:center} .error404 .nf-eyebrow{ display:inline-flex;align-items:center;gap:9px; margin:0 0 26px;padding:7px 15px;border-radius:999px; background:rgba(232,89,91,.12);border:1px solid var(--line-gold); color:var(--gold); } .error404 .nf-eyebrow::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--gold); animation:nfPulse 2.4s ease-in-out infinite; } @keyframes nfPulse{ 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(232,89,91,.55)} 50% {opacity:.65;box-shadow:0 0 0 6px rgba(232,89,91,0)} } /* The test card. A missing channel really does look like this, which is the one detail only an IPTV site could put here. */ .error404 .nf-screen{ position:relative;width:min(320px,78vw);margin:0 auto 30px; filter:drop-shadow(0 18px 40px rgba(192,40,42,.28)); } .error404 .nf-screen svg{display:block;width:100%;height:auto} /* A single scanline crossing the glass. Clipped to the screen's inner box. */ .error404 .nf-scan{ position:absolute;left:4.4%;right:4.4%;top:7%;height:66%; border-radius:12px;overflow:hidden;pointer-events:none; } .error404 .nf-scan::after{ content:"";position:absolute;left:0;right:0;height:26%; background:linear-gradient(180deg,rgba(244,241,239,0),rgba(244,241,239,.14),rgba(244,241,239,0)); animation:nfScan 3.6s linear infinite; } @keyframes nfScan{0%{top:-30%}100%{top:104%}} .error404 .nf-head h1{ font-size:clamp(1.9rem,5.2vw,3rem);font-weight:900; text-wrap:balance;margin-bottom:16px; } .error404 .nf-head h1 .accent-i{ color:#fff; background:linear-gradient(100deg,rgba(192,40,42,.92),rgba(232,89,91,.82)); -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .22em;border-radius:16px; } .error404 .nf-lead{margin:0 auto;max-width:56ch} .error404 .nf-cta{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px; } .error404 .nf-btn{ border-radius:999px;padding:13px 24px; background:linear-gradient(100deg,var(--blue),var(--gold));color:#fff; box-shadow:0 8px 22px rgba(192,40,42,.30); transition:transform .16s ease,box-shadow .16s ease; } .error404 .nf-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(192,40,42,.40)} .error404 .nf-btn .tri{transition:transform .16s ease} .error404 .nf-btn:hover .tri{transform:translateX(3px)} .error404 .btn-ghost{border-radius:999px;padding:13px 24px} /* Routes back in. Cards rather than a run of middot-separated links: a dead end is where a destination has to look like somewhere worth tapping. */ .error404 .nf-routes{margin-top:56px} .error404 .nf-routes h2{ text-align:center;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase; font-weight:800;color:var(--mut);margin-bottom:20px; } .error404 .nf-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px; max-width:900px;margin:0 auto; } .error404 .nf-card{ display:flex;align-items:center;gap:13px; padding:16px 18px;border-radius:16px; background:var(--panel);border:1px solid var(--line);color:var(--txt); transition:border-color .16s ease,transform .16s ease,background .16s ease; } .error404 .nf-card:hover{ text-decoration:none;border-color:var(--line-gold); transform:translateY(-3px);background:#181818; } .error404 .nf-card-ico{ flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px; border-radius:11px;color:var(--gold); background:rgba(232,89,91,.12);border:1px solid var(--line-gold); } .error404 .nf-card-txt{display:flex;flex-direction:column;min-width:0} .error404 .nf-card-txt strong{font-family:var(--disp);font-weight:800;font-size:.98rem} .error404 .nf-card-txt em{font-style:normal;color:var(--mut);font-size:.83rem;margin-top:2px} .error404 .nf-card-go{ flex:0 0 auto;margin-left:auto;width:7px;height:7px; border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut); transform:rotate(-45deg); transition:border-color .16s ease,transform .16s ease; } .error404 .nf-card:hover .nf-card-go{ border-color:var(--gold);transform:rotate(-45deg) translate(2px,2px); } @media (max-width:820px){ .error404 .nf-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .error404 .nf-grid{grid-template-columns:1fr} .error404 .nf-cta .btn{width:100%;justify-content:center} } @media (prefers-reduced-motion:reduce){ .error404 .nf-eyebrow::before, .error404 .nf-scan::after{animation:none} .error404 .nf-scan{display:none} .error404 .nf-btn,.error404 .nf-btn .tri, .error404 .nf-card,.error404 .nf-card-go{transition:none} }