/* Theme Name: Venice McDonald Solicitor Theme URI: https://venicemcdonaldsolicitor.co.uk Author: Venice McDonald Solicitor Author URI: https://venicemcdonaldsolicitor.co.uk Description: Bespoke classic WordPress theme for Venice McDonald Solicitor — an independent solicitor in Derby & the East Midlands. Modern-professional design with warm neutrals, a Practice Areas custom post type, automatic LegalService schema, and slots for your SEO and contact-form plugins. Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: venice-mcdonald */ /* ========================================================================= The full design system follows. You can edit colours/spacing via the CSS custom properties in :root below. Palette variants (.palette-*) and dark mode (.dark) can be applied by adding the matching class to (see functions.php -> venice_body_class / customizer if you extend it). ========================================================================= */ /* Venice McDonald Solicitor — site styles */ :root { /* default palette — Warm Neutrals (modern professional) */ --bg: #f7f4ef; --bg-2: #ede7db; --paper: #fcfaf6; --ink: #2b2a27; --ink-soft: #44423d; --muted: #756f61; --rule: #ddd5c4; --accent: #8a6d3b; --accent-soft: #c9b388; --danger: #8a2d3b; --ok: #2f6b4f; /* type */ --serif: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* container */ --container: 1200px; --container-narrow: 820px; /* density modifier (overridden by Tweak) */ --density: 1; } /* palette variants set by Tweak */ .palette-warm { --bg: #f7f4ef; --bg-2: #ede7db; --paper: #fcfaf6; --ink: #2b2a27; --ink-soft: #44423d; --muted: #756f61; --rule: #ddd5c4; --accent: #8a6d3b; --accent-soft: #c9b388; } .palette-ink { --bg: #f4f1ea; --bg-2: #eae5d6; --paper: #fbf8f1; --ink: #14223e; --ink-soft: #2c3a55; --muted: #6a6557; --rule: #d6cdb6; --accent: #9a7637; --accent-soft: #c4a96a; } .palette-forest { --bg: #f3f1ea; --bg-2: #e6e3d4; --paper: #fbfaf4; --ink: #1f3a2c; --ink-soft: #36513f; --muted: #5e6358; --rule: #cfcdba; --accent: #6b5a32; --accent-soft: #b89968; } .palette-claret { --bg: #f7f3ee; --bg-2: #ebe2d6; --paper: #fcf8f2; --ink: #2a1418; --ink-soft: #4a2a30; --muted: #6e5e58; --rule: #ddccc1; --accent: #7a1f2b; --accent-soft: #b06070; } /* DARK MODE */ .dark { --bg: #1a1815; --bg-2: #25221d; --paper: #211e1a; --ink: #f3ece0; --ink-soft: #d6cdb9; --muted: #968d7c; --rule: #3a342b; --accent: #d6b079; --accent-soft: #c9a672; --danger: #d97a8a; } .dark .hero-portrait { background: repeating-linear-gradient(45deg, var(--bg-2) 0 8px, transparent 8px 16px), var(--paper); } /* heading style variant */ /* alternate heading mode — full serif headings (Tweak) */ .heading-serif h1, .heading-serif h2, .heading-serif h3, .heading-serif h4, .heading-serif .display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; } .heading-serif h1 em, .heading-serif h2 em, .heading-serif .display em { font-weight: 400; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--accent); } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; color: var(--ink); letter-spacing: -0.025em; margin: 0; text-wrap: balance; } .display { font-family: var(--sans); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; } /* serif italic accent fragments embedded in sans headings */ h1 em, h2 em, h3 em, .display em, .serif-accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent); } h1 em, h2 em, .display em { font-weight: 300; } h1 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.04; } h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; } h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; } h4 { font-size: 18px; line-height: 1.3; } p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; } .lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-soft); line-height: 1.45; } .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); display: inline-block; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .container.narrow { max-width: var(--container-narrow); } .section { padding: calc(var(--s-9) * var(--density)) 0; } .section.tight { padding: calc(var(--s-7) * var(--density)) 0; } .section.mid { padding: calc(var(--s-8) * var(--density)) 0; } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } /* ---- Header ---- */ header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--rule); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px clamp(20px, 4vw, 48px); max-width: var(--container); margin: 0 auto; } .logo { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; color: var(--ink); } .logo .mark { width: 36px; height: 36px; border: 1px solid var(--ink); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); background: var(--paper); } .logo .firm { display: flex; flex-direction: column; line-height: 1.05; } .logo .firm small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; } nav.primary { display: flex; align-items: center; gap: 4px; } nav.primary a { font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 4px; color: var(--ink-soft); position: relative; } nav.primary a:hover { background: var(--bg-2); color: var(--ink); } nav.primary a.active { color: var(--ink); } nav.primary a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--accent); } nav.primary .has-menu { position: relative; } nav.primary .menu { position: absolute; top: calc(100% + 8px); left: 0; background: var(--paper); border: 1px solid var(--rule); padding: 8px; min-width: 280px; box-shadow: 0 24px 48px -16px rgba(20, 25, 40, 0.16); display: none; flex-direction: column; gap: 2px; z-index: 60; } nav.primary .has-menu:hover .menu, nav.primary .has-menu:focus-within .menu { display: flex; } nav.primary .menu a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 4px; gap: 2px; } nav.primary .menu a small { font-family: var(--sans); font-size: 12px; color: var(--muted); font-weight: 400; } nav.primary .menu a:hover { background: var(--bg-2); } .header-cta { display: flex; align-items: center; gap: 12px; } .phone-link { font-family: var(--serif); font-size: 16px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .phone-link small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; font-weight: 500; } .mobile-toggle { display: none; background: none; border: 1px solid var(--rule); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; } .mobile-toggle span { width: 18px; height: 1.5px; background: var(--ink); position: relative; } .mobile-toggle span::before, .mobile-toggle span::after { content: ""; position: absolute; width: 18px; height: 1.5px; background: var(--ink); left: 0; } .mobile-toggle span::before { top: -6px; } .mobile-toggle span::after { top: 6px; } @media (max-width: 980px) { nav.primary, .header-cta .phone-link { display: none; } .mobile-toggle { display: inline-flex; } } /* mobile drawer */ .drawer { position: fixed; inset: 64px 0 0 0; background: var(--paper); z-index: 49; padding: 24px; display: none; flex-direction: column; gap: 4px; overflow-y: auto; border-top: 1px solid var(--rule); } .drawer.open { display: flex; } .drawer a { font-family: var(--serif); font-size: 22px; padding: 14px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; } .drawer a small { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; } .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.large { padding: 16px 28px; font-size: 15px; } .btn .arr { display: inline-block; transition: transform .2s; } .btn:hover .arr { transform: translateX(3px); } /* ---- Hero ---- */ .hero { padding: clamp(48px, 8vw, 120px) 0 clamp(48px, 6vw, 96px); position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: end; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } } .hero h1 .accent-word { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--accent); letter-spacing: -0.01em; } .hero h1 .underline { display: inline-block; position: relative; } .hero h1 .underline::after { content: ""; position: absolute; bottom: 0.04em; left: 0; right: 0; height: 8px; background: var(--accent-soft); opacity: 0.35; z-index: -1; } .hero-meta { display: grid; gap: 24px; border-left: 1px solid var(--rule); padding-left: clamp(20px, 3vw, 40px); } .hero-meta .meta-item small { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; font-weight: 500; } .hero-meta .meta-item p { font-family: var(--serif); font-size: 18px; margin: 0; color: var(--ink); } .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .hero-tags .tag { border: 1px solid var(--rule); padding: 6px 12px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); background: var(--paper); } .hero-portrait { width: 100%; aspect-ratio: 4/5; background: repeating-linear-gradient(45deg, var(--bg-2) 0 8px, transparent 8px 16px), var(--paper); border: 1px solid var(--rule); display: grid; place-items: center; color: var(--muted); font-family: var(--mono); font-size: 12px; text-align: center; padding: 24px; } .hero-marquee { margin-top: clamp(48px, 6vw, 80px); padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 56px; overflow: hidden; position: relative; --marquee-w: max-content; } .hero-marquee .track { display: flex; gap: 56px; white-space: nowrap; animation: marquee 60s linear infinite; } .hero-marquee span { font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--ink-soft); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 56px; } .hero-marquee span::after { content: "✦"; color: var(--accent); font-style: normal; font-size: 12px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- Cards / services grid ---- */ .section-head { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); } @media (max-width: 800px) { .section-head { grid-template-columns: 1fr; gap: 16px; } } .section-head .left h2 { margin-top: 8px; } .section-head .right p { color: var(--ink-soft); font-size: 17px; } .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } @media (max-width: 900px) { .services { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .services { grid-template-columns: 1fr; } } .service-card { background: var(--paper); padding: 32px; display: flex; flex-direction: column; gap: 16px; cursor: pointer; position: relative; transition: background .2s; min-height: 280px; } .service-card:hover { background: var(--bg-2); } .service-card .num { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; } .service-card h3 { font-size: 24px; } .service-card p { font-size: 14px; color: var(--ink-soft); margin: 0; flex: 1; } .service-card .more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--accent); margin-top: 8px; } .service-card .more .arr { transition: transform .2s; } .service-card:hover .more .arr { transform: translateX(4px); } .service-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .service-card .tags small { font-family: var(--sans); font-size: 11px; color: var(--muted); background: var(--bg-2); padding: 2px 8px; } .service-card:hover .tags small { background: var(--bg); } /* ---- About strip ---- */ .about-strip { background: var(--ink); color: var(--paper); padding: clamp(64px, 8vw, 120px) 0; } .about-strip .container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } @media (max-width: 900px) { .about-strip .container { grid-template-columns: 1fr; } } .about-strip h2 { color: var(--paper); } .about-strip h2 em { color: var(--accent-soft); font-style: italic; } .about-strip p { color: rgba(251, 248, 241, 0.78); font-size: 17px; } .about-strip .eyebrow { color: var(--accent-soft); } .about-strip .eyebrow::before { background: var(--accent-soft); } .about-strip .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); } .about-strip .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .about-strip .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(251, 248, 241, 0.3); } .about-strip .btn.ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .about-strip .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; } .about-strip .stat .n { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--accent-soft); } .about-strip .stat .l { font-size: 13px; color: rgba(251, 248, 241, 0.7); margin-top: 8px; } /* ---- Process steps ---- */ .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } @media (max-width: 800px) { .process { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .process { grid-template-columns: 1fr; } } .process .step { background: var(--bg); padding: 32px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; } .process .step .num { font-family: var(--serif); font-size: 14px; color: var(--accent); letter-spacing: 0.04em; } .process .step h4 { font-family: var(--serif); font-size: 22px; } .process .step p { font-size: 14px; color: var(--ink-soft); margin: 0; } /* ---- Areas served ---- */ .areas { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 80px); align-items: center; } @media (max-width: 900px) { .areas { grid-template-columns: 1fr; } } .areas .map { background: var(--paper); border: 1px solid var(--rule); aspect-ratio: 4/5; position: relative; padding: 24px; overflow: hidden; } .areas .map svg { width: 100%; height: 100%; } .areas .list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } @media (max-width: 480px) { .areas .list { grid-template-columns: 1fr; } } .areas .list .place { background: var(--bg); padding: 16px 20px; } .areas .list .place h4 { font-family: var(--serif); font-size: 18px; margin-bottom: 4px; } .areas .list .place small { font-family: var(--sans); font-size: 12px; color: var(--muted); } /* ---- Testimonial ---- */ .testimonial { background: var(--bg-2); } .testimonial blockquote { margin: 0; font-family: var(--serif); font-size: clamp(24px, 3vw, 40px); line-height: 1.25; color: var(--ink); max-width: 18ch; text-wrap: balance; } .testimonial blockquote::before { content: "“"; font-family: var(--serif); font-size: 120px; line-height: 0.6; color: var(--accent); display: block; margin-bottom: 8px; } .testimonial .who { margin-top: 32px; font-size: 13px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; gap: 24px; } } .testimonial-grid blockquote { font-size: clamp(18px, 1.6vw, 22px); max-width: none; } .testimonial-grid blockquote::before { font-size: 64px; } /* ---- FAQ ---- */ .faq { border-top: 1px solid var(--rule); } .faq-item { border-bottom: 1px solid var(--rule); padding: 24px 0; cursor: pointer; } .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; list-style: none; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); color: var(--ink); cursor: pointer; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .plus { width: 32px; height: 32px; border: 1px solid var(--rule); display: grid; place-items: center; flex-shrink: 0; position: relative; transition: background .15s, border-color .15s; } .faq-item .plus::before, .faq-item .plus::after { content: ""; position: absolute; background: var(--ink); } .faq-item .plus::before { width: 12px; height: 1.5px; } .faq-item .plus::after { width: 1.5px; height: 12px; transition: transform .2s; } .faq-item[open] .plus { background: var(--ink); border-color: var(--ink); } .faq-item[open] .plus::before, .faq-item[open] .plus::after { background: var(--paper); } .faq-item[open] .plus::after { transform: rotate(90deg); } .faq-item .answer { padding-top: 16px; color: var(--ink-soft); font-size: 16px; max-width: 70ch; } /* ---- CTA ---- */ .cta { background: var(--ink); color: var(--paper); padding: clamp(64px, 8vw, 120px) 0; text-align: center; } .cta h2 { color: var(--paper); max-width: 18ch; margin: 0 auto 24px; } .cta h2 em { color: var(--accent-soft); font-style: italic; } .cta p { color: rgba(251, 248, 241, 0.78); max-width: 50ch; margin: 0 auto 32px; font-size: 17px; } .cta .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); } .cta .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .cta .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(251, 248, 241, 0.3); } .cta-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ---- Footer ---- */ footer.site { background: var(--ink); color: rgba(251, 248, 241, 0.7); padding: clamp(48px, 6vw, 72px) 0 24px; border-top: 1px solid rgba(251, 248, 241, 0.06); } footer.site .container { display: grid; gap: 48px; } footer.site .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } @media (max-width: 900px) { footer.site .top { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { footer.site .top { grid-template-columns: 1fr; } } footer.site h5 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); margin: 0 0 16px; font-weight: 600; } footer.site a { color: rgba(251, 248, 241, 0.7); display: block; padding: 4px 0; font-size: 14px; } footer.site a:hover { color: var(--accent-soft); } footer.site .firm-block .firm-name { font-family: var(--serif); font-size: 22px; color: var(--paper); margin-bottom: 12px; } footer.site .firm-block p { font-size: 13px; max-width: 36ch; color: rgba(251, 248, 241, 0.6); } footer.site .regulatory { border-top: 1px solid rgba(251, 248, 241, 0.08); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: 12px; } footer.site .regulatory p { margin: 0; max-width: none; } footer.site .legal-row { border-top: 1px solid rgba(251, 248, 241, 0.06); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 12px; color: rgba(251, 248, 241, 0.5); } footer.site .legal-row a { display: inline; padding: 0; font-size: 12px; } /* ---- Subpage hero / page top ---- */ .page-top { padding: clamp(48px, 6vw, 96px) 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--rule); } .page-top .breadcrumbs { font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; } .page-top .breadcrumbs a:hover { color: var(--accent); } .page-top h1 { max-width: 22ch; margin-bottom: 16px; } .page-top .lead { max-width: 60ch; } /* ---- Long-form copy ---- */ .prose { max-width: 70ch; } .prose h2 { margin-top: 56px; margin-bottom: 16px; } .prose h3 { margin-top: 40px; margin-bottom: 12px; font-family: var(--serif); } .prose ul { padding-left: 20px; } .prose li { margin-bottom: 8px; line-height: 1.6; max-width: 64ch; } .prose li::marker { color: var(--accent); } .prose strong { color: var(--ink); } .split-cols { display: grid; grid-template-columns: 1fr 320px; gap: clamp(32px, 5vw, 64px); align-items: start; } @media (max-width: 900px) { .split-cols { grid-template-columns: 1fr; } } .aside-card { background: var(--paper); border: 1px solid var(--rule); padding: 28px; position: sticky; top: 96px; } .aside-card h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 600; } .aside-card .fee { font-family: var(--serif); font-size: 28px; color: var(--ink); margin-bottom: 4px; } .aside-card .fee small { font-family: var(--sans); font-size: 13px; color: var(--muted); } .aside-card p { font-size: 14px; color: var(--ink-soft); } .aside-card .btn { width: 100%; justify-content: center; margin-top: 12px; } .aside-card hr { margin: 20px 0; } .includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 32px 0; padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } @media (max-width: 700px) { .includes-grid { grid-template-columns: 1fr; gap: 24px; } } .includes-grid h4 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; font-weight: 600; } .includes-grid ul { list-style: none; padding: 0; margin: 0; } .includes-grid li { padding: 6px 0 6px 20px; font-size: 14px; position: relative; } .includes-grid li::before { content: "—"; position: absolute; left: 0; color: var(--accent); } .includes-grid .excl li::before { content: "×"; color: var(--muted); } /* ---- Contact form ---- */ .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 80px); } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .form label { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .form .field { margin-bottom: 20px; } .form input, .form select, .form textarea { width: 100%; padding: 12px 14px; font-family: var(--sans); font-size: 15px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); border-radius: 0; outline: none; transition: border-color .15s; } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); } .form textarea { min-height: 140px; resize: vertical; } .form .error { color: var(--danger); font-size: 12px; margin-top: 6px; } .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } } .form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); text-transform: none; letter-spacing: 0; } .form .check input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } .form .check a { text-decoration: underline; color: var(--accent); } .form .submitted { background: var(--bg-2); border: 1px solid var(--accent-soft); padding: 32px; text-align: center; } .form .submitted h3 { font-family: var(--serif); margin-bottom: 12px; } .contact-aside .item { padding: 24px 0; border-bottom: 1px solid var(--rule); } .contact-aside .item:first-child { padding-top: 0; } .contact-aside .item h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-weight: 600; } .contact-aside .item p { font-family: var(--serif); font-size: 20px; margin: 0; } .contact-aside .item small { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); } /* ---- SEO chips (visual: shows targeted keywords elegantly on pages) ---- */ .keyword-chip { display: inline-block; font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--bg-2); padding: 3px 8px; margin: 0 4px 4px 0; } /* ---- Misc ---- */ .split-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 800px) { .split-block { grid-template-columns: 1fr; } } .callout { background: var(--bg-2); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; font-size: 15px; color: var(--ink-soft); } .callout strong { color: var(--ink); } .divider-mark { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 32px 0; color: var(--accent); font-family: var(--serif); font-style: italic; } .divider-mark::before, .divider-mark::after { content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 120px; } /* skip link */ .skip { position: absolute; left: -9999px; top: 12px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; } .skip:focus { left: 12px; } /* reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* --- WordPress: click-to-open dropdown (mobile/keyboard) --- */ nav.primary .has-menu.open .menu { display: flex; } /* WordPress admin bar offset for the sticky header */ body.admin-bar header.site { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar header.site { top: 46px; } body.admin-bar .drawer { top: 110px; } }