/* App / sub-page styles — reuses tokens & shell from landing.css. Import landing.css BEFORE this file so :root tokens and .btn/.header/.footer exist. */ /* main.page, not bare .page — WordPress puts a `page` class on , which must not receive this padding. */ main.page { min-height: calc(100vh - 76px - 84px); padding: 64px 0 96px; } .page-narrow { width: min(calc(100% - 48px), 560px); margin-inline: auto; } .page-article { width: min(calc(100% - 48px), 880px); margin-inline: auto; } .back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 13px; font-weight: 800; color: var(--grey); } .back-link:hover { color: var(--ink); } /* ─── Auth / form card ─── */ .auth-card { padding: 40px; border: 1px solid var(--ink); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); } .auth-card h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 12px; } .auth-card .lead { margin-bottom: 30px; } .field { margin-bottom: 20px; } .field label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 850; letter-spacing: -0.01em; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="url"] { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: inherit; font-size: 15px; color: var(--ink); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .field input::placeholder { color: #a2a299; } .field input:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(255, 201, 0, 0.35); } .field .hint { margin-top: 7px; font-size: 12px; color: var(--grey); } .field.error input { border-color: #c0392b; } .field .err-msg { display: none; margin-top: 7px; font-size: 12px; font-weight: 700; color: #c0392b; } .field.error .err-msg { display: block; } /* Plan chooser (radio cards) */ .plan-choice { display: grid; gap: 10px; margin-bottom: 26px; } .plan-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease; } .plan-opt:hover { transform: translateY(-1px); border-color: #c9c9bf; } .plan-opt input { position: absolute; opacity: 0; pointer-events: none; } .plan-opt .radio { flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%; transition: box-shadow 0.2s ease, background 0.2s ease; } .plan-opt .meta { flex: 1; } .plan-opt .meta strong { display: block; font-size: 15px; } .plan-opt .meta small { color: var(--grey); font-size: 12px; } .plan-opt .price-sm { font-size: 16px; font-weight: 900; letter-spacing: -0.03em; } .plan-opt:has(input:checked) { border-color: var(--ink); background: var(--cream); } .plan-opt:has(input:checked) .radio { background: var(--yellow); box-shadow: inset 0 0 0 3px #fff; } .plan-opt input:focus-visible ~ .radio { box-shadow: 0 0 0 4px rgba(255, 201, 0, 0.4); } .form-msg { margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.5; display: none; } .form-msg.show { display: block; } .form-msg.ok { color: var(--green); background: #e9f6ee; border: 1px solid #bfe3cd; } .form-msg.bad { color: #c0392b; background: #fbeae8; border: 1px solid #f1c9c3; } .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; } .auth-alt { margin-top: 24px; font-size: 13px; color: var(--grey); text-align: center; } .auth-alt a { font-weight: 850; color: var(--ink); border-bottom: 1px solid; } /* Success state */ .success { text-align: center; padding: 48px 40px; border: 1px solid var(--ink); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); } .success .check { width: 64px; height: 64px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); font-size: 30px; font-weight: 900; } .success h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 14px; } .success p { color: #4f4f49; font-size: 16px; line-height: 1.6; } .success .site-echo { display: inline-block; margin: 18px 0 6px; padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 800; font-size: 13px; } /* ─── Article page ─── */ .article-head { margin-bottom: 40px; } .article-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 13px; border-radius: 999px; background: var(--cream); border: 1px solid #e7d67a; font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .article-hero { height: 300px; margin: 24px 0 40px; border-radius: var(--r); background: linear-gradient(135deg, #ffcf18 0 45%, #ffe77e 45% 65%, #171713 65%); } .prose h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.02; margin-bottom: 16px; } .prose h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 44px 0 16px; } .prose h3 { font-size: 20px; margin: 30px 0 10px; } .prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: #26261f; } .prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; } .prose li { margin-bottom: 9px; font-size: 17px; line-height: 1.6; color: #26261f; } .prose strong { font-weight: 850; } .prose .article-meta { margin-bottom: 34px; color: var(--grey); font-size: 14px; } .prose table { width: 100%; border-collapse: collapse; border: 1px solid var(--ink); margin: 8px 0 24px; font-size: 15px; } .prose th { padding: 13px 16px; background: var(--ink); color: var(--yellow); text-align: left; font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .prose td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.55; } .prose tr:nth-child(even) td { background: var(--paper); } .article-faq { margin-top: 40px; } .article-cta { margin-top: 44px; padding: 28px; border-left: 5px solid var(--yellow); border-radius: 12px; background: var(--paper); } .article-cta strong { display: block; margin-bottom: 6px; font-size: 18px; } .article-cta p { margin-bottom: 16px; color: var(--grey); font-size: 14px; } /* ─── Legal ─── */ .legal h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; } .legal .updated { margin-bottom: 34px; color: var(--grey); font-size: 13px; } .legal h2 { font-size: 22px; margin: 34px 0 12px; } .legal p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.7; color: #33332c; } .legal ul { margin: 0 0 16px; padding-left: 22px; } .legal li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.6; color: #33332c; } @media (max-width: 680px) { .auth-card { padding: 28px 22px; } .success { padding: 36px 24px; } .article-hero { height: 200px; } } /* ─── WordPress signup form in the dark final section ─── */ .nn-signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 560px; } .nn-signup input { flex: 1 1 200px; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; } .nn-signup input::placeholder { color: #9a9a90; } .nn-signup .btn { flex: 0 0 auto; } .final .final-note { display: block; margin-top: 14px; color: #9f9f96; font-size: 13px; } .nn-form-msg { margin-top: 22px; padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; display: inline-block; } .nn-ok { background: #e9f6ee; color: var(--green); } .nn-bad { background: #fbeae8; color: #c0392b; } /* ─── Blog index + single post ─── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 38px; } @media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; } .blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18,18,15,.10); } .blog-card-link { display: block; color: inherit; } .blog-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .blog-card-body { padding: 18px 20px 22px; } .blog-card-body time { font-size: 12.5px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; } .blog-card-body h2 { margin: 8px 0 10px; font-size: 19px; line-height: 1.35; } .blog-card-body p { margin: 0; font-size: 14px; line-height: 1.6; color: #565650; } .blog-pagination { margin-top: 40px; text-align: center; } .blog-pagination .nav-links { display: inline-flex; gap: 8px; } .blog-pagination .page-numbers { min-width: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 800; font-size: 14px; } .blog-pagination .page-numbers.current { background: var(--yellow); border-color: var(--yellow); } .post-meta { margin: -6px 0 18px; font-size: 13.5px; font-weight: 700; color: var(--grey); } .post-hero { width: 100%; border-radius: 14px; margin-bottom: 26px; } /* ─── Prev/next navigation on single posts ─── */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); } @media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } } .post-nav-item { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s ease, transform .15s ease; } .post-nav-item:hover { border-color: var(--ink); transform: translateY(-2px); } .post-nav-item.next { text-align: right; grid-column: 2; } .post-nav-item.prev { grid-column: 1; } @media (max-width: 640px) { .post-nav-item.next, .post-nav-item.prev { grid-column: auto; } } .post-nav-item small { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--grey); } .post-nav-item span { font-size: 15px; font-weight: 800; line-height: 1.4; } /* ─── Complianz consent banner — brand styling (overrides plugin palette) ─── */ #cmplz-cookiebanner-container .cmplz-cookiebanner { --cmplz_banner_background_color: #ffffff; --cmplz_banner_border_color: var(--ink, #12120f); border: 1px solid var(--ink, #12120f); border-radius: 14px; box-shadow: 0 18px 44px rgba(18, 18, 15, 0.18); font-family: inherit; accent-color: var(--yellow, #ffc900); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { font-weight: 900; letter-spacing: -0.01em; color: var(--ink, #12120f); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { color: #33332c; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn { border-radius: 12px; border: 1px solid var(--ink, #12120f); background: #fff; color: var(--ink, #12120f); font-weight: 850; transition: transform 0.15s ease, box-shadow 0.15s ease; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(18, 18, 15, 0.15); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: var(--yellow, #ffc900); border-color: var(--yellow, #ffc900); color: var(--ink, #12120f); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a, #cmplz-cookiebanner-container .cmplz-cookiebanner a { color: var(--ink, #12120f); text-decoration: underline; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close { color: var(--ink, #12120f); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible { outline: 2px solid var(--yellow, #ffc900); outline-offset: 2px; border-radius: 8px; } /* Final section CTA (replaces the old lead form) */ .final .final-cta { margin-top: 26px; }