@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Oswald:wght@300;400;500;600;700&display=swap'); /* ============================================================ THEME SYSTEM — switching data-theme on reskins all layouts ============================================================ */ :root { --maxw: 1440px; --radius: 8px; --bw: 1px; --gap: 24px; --btn-bg: var(--accent); } /* RESTAURANTS — matches restaurantsforbettercolorado.com: warm off-white, charcoal headings, terracotta CTA, clean modern sans */ [data-theme="restaurants"] { --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif; --font-body: "Oswald", "Helvetica Neue", Arial, sans-serif; --font-alt: "Oswald", "Helvetica Neue", sans-serif; --bg: #ffffff; --panel: #ffffff; --ink: #1b1f24; --muted: #5c6675; --line: #e4e7ec; --accent: #0c1c3c; --accent2: #2f6fe0; --accent-ink: #ffffff; --accent-soft: #e9f0fc; --feature: #4d8bf0; --feature-ink: #ffffff; --btn-bg: #0c1c3c; --radius: 2px; --bw: 1px; --shadow: 0 2px 10px rgba(20,40,80,.08); } /* GRASSROOTS — warm cream + terracotta, rounded, friendly */ [data-theme="grassroots"] { --font-head: "Trebuchet MS", "Segoe UI", sans-serif; --font-body: "Segoe UI", "Trebuchet MS", sans-serif; --font-alt: Georgia, "Times New Roman", serif; --bg: #fbf4ea; --panel: #fffdf9; --ink: #3a2a1c; --muted: #8a7257; --line: #ecddc6; --accent: #b8501f; --accent2: #e08a3c; --accent-ink: #ffffff; --accent-soft: #f7e6d2; --feature: #f0d8bd; --feature-ink: #3a2a1c; --btn-bg: #b8501f; --radius: 18px; --bw: 1px; --shadow: 0 6px 18px rgba(120,70,20,.12); } /* EDITORIAL — newspaper serif, cream, maroon */ [data-theme="editorial"] { --font-head: "Georgia", "Times New Roman", serif; --font-body: "Georgia", "Times New Roman", serif; --font-alt: "Helvetica Neue", Arial, sans-serif; --bg: #f5f1e8; --panel: #fffdf8; --ink: #1c1a17; --muted: #6b6358; --line: #d6cfc0; --accent: #7a1f1f; --accent2: #a8642b; --accent-ink: #ffffff; --accent-soft: #efe5df; --feature: #e7dccd; --feature-ink: #1c1a17; --btn-bg: #7a1f1f; --radius: 2px; --bw: 1px; --shadow: none; } /* ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.55; transition: background .25s, color .25s; } h1,h2,h3,.head { font-family: var(--font-head); } a { color: var(--accent2); } /* ---- Top control bar ---- */ .controls { position: sticky; top: 0; z-index: 50; background: var(--panel); border-bottom: var(--bw) solid var(--line); } .controls-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; } .brand { font-family: var(--font-head); font-weight: 800; font-size: 15px; } .brand small { display:block; font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 11px; } .steps { display: flex; flex-direction: column; gap: 10px; } .step { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .step-lbl { flex: 0 0 178px; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--ink); } .step-num { background: var(--ink); color: var(--bg); padding: 2px 7px; border-radius: 3px; font-weight: 800; margin-right: 3px; } .step-note { flex: 1 1 260px; min-width: 220px; font-size: 12px; color: var(--muted); line-height: 1.4; } .step-note b { color: var(--ink); } .step .tabs-inner { padding: 0; margin: 0; } .style-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } @media (max-width: 640px){ .step-lbl { flex-basis: 100%; } } .swatch { border: var(--bw) solid var(--line); background: var(--panel); color: var(--ink); padding: 6px 12px; font-size: 12px; cursor: pointer; border-radius: 999px; font-family: var(--font-body); } .swatch:hover { border-color: var(--accent2); } .swatch[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ---- Layout tabs ---- */ .tabs-inner { display: flex; gap: 2px; overflow-x: auto; flex-wrap: wrap; } .tab { flex: 0 0 auto; border: none; background: transparent; color: var(--muted); padding: 12px 14px; font-size: 13px; cursor: pointer; font-family: var(--font-body); border-bottom: 2px solid transparent; white-space: nowrap; } .tab:hover { color: var(--ink); } .tab[aria-selected="true"] { color: var(--accent2); border-bottom-color: var(--accent2); font-weight: 600; } /* ---- Stage ---- */ .stage { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 80px; } .panel-note { font-size: 13px; color: var(--muted); margin: 0 0 22px; border-left: 3px solid var(--accent2); padding: 6px 0 6px 12px; background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; } .panel-note b { color: var(--ink); } /* ---- Building blocks ---- */ .card { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .pad { padding: 28px; } .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--accent2); font-weight: 700; margin: 0 0 8px; } .ptitle { font-size: 30px; line-height: 1.15; margin: 0 0 14px; font-weight: 800; } mark.hl { background: var(--accent-soft); color: inherit; padding: 0 .18em; border-radius: 2px; } .letter-fig { margin: 20px 0; } .letter-fig img { width: 100%; max-width: 620px; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--radius); } .letter-fig figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; font-family: var(--font-body); } .fn-ref { color: var(--accent2); font-weight: 700; font-size: .7em; vertical-align: super; line-height: 0; } .footnotes { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 14px; } .footnotes ol { margin: 0; padding-left: 20px; } .footnotes li { font-size: 12px; color: var(--muted); line-height: 1.5; } .headline-kicker { font-family: var(--font-alt); font-style: italic; color: var(--accent2); } .lead { font-size: 18px; line-height: 1.5; } .ptext p { margin: 0 0 14px; } .muted { color: var(--muted); } .btn { display: inline-block; background: var(--btn-bg); color: var(--accent-ink); border: var(--bw) solid transparent; padding: 13px 22px; font-size: 15px; font-weight: 700; cursor: pointer; border-radius: var(--radius); font-family: var(--font-body); width: 100%; } .btn:hover { filter: brightness(1.06); } .field { margin-bottom: 12px; } .field label { display:block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 14px; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } /* signature list */ .sig-list { list-style: none; margin: 0; padding: 0; } .sig-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .sig-item:last-child { border-bottom: none; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; } .sig-name { font-weight: 600; font-size: 14px; } .sig-meta { font-size: 12px; color: var(--muted); } /* two-column signer list (desktop), collapses to one on mobile */ .sig-2col .sig-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } @media (max-width: 760px){ .sig-2col .sig-list { grid-template-columns: 1fr; } } details.expander { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; } details.expander summary { cursor: pointer; color: var(--accent2); font-weight: 600; font-size: 14px; list-style: none; } details.expander summary::-webkit-details-marker { display: none; } details.expander[open] { border-top: none; margin-top: 0; padding-top: 0; } details.expander[open] summary { display: none; } .banner { position: relative; height: 320px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg,#5f6266,#9aa0a6); filter: grayscale(1); display: flex; align-items: center; justify-content: center; } .banner .ph-tag { color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.6); padding: 6px 14px; border-radius: 999px; font-size: 12px; } .banner-btn { position: absolute; top: 26px; left: 26px; background: var(--accent); color: #fff; padding: 13px 30px; font-family: var(--font-head); font-weight: 700; font-size: 14px; border: 1px solid rgba(255,255,255,.3); } .wave { display: block; width: 100%; height: 90px; margin-top: -88px; position: relative; } .wave path { fill: var(--feature); } .hero { text-align: center; padding: 28px 24px 48px; border-radius: 0 0 var(--radius) var(--radius); background: var(--feature); color: var(--feature-ink); margin-top: -1px; } .hero .ptitle { font-size: 40px; color: var(--feature-ink); } .hero .eyebrow { color: var(--feature-ink); opacity: .85; } .hero .headline-kicker { color: var(--feature-ink); opacity: .95; } .hero .lead { color: var(--feature-ink); } .hero .social-lbl { color: var(--feature-ink); opacity: .85; } .hero-form { background: var(--panel); color: var(--ink); border-radius: var(--radius); padding: 22px; max-width: 460px; margin: 24px auto 0; text-align: left; box-shadow: var(--shadow); } /* plan timeline */ .timeline { display: grid; grid-template-columns: repeat(3,1fr); } .tl-step { position: relative; padding: 0 14px; text-align: center; } .tl-step::before { content:""; position:absolute; top:18px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; } .tl-step:first-child::before { display:none; } .tl-dot { width:38px; height:38px; border-radius:50%; background:var(--panel); border:2px solid var(--line); color:var(--muted); display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 12px; position:relative; z-index:1; } .tl-step.active .tl-dot { background:var(--btn-bg); border-color:var(--btn-bg); color:var(--accent-ink); box-shadow:0 0 0 5px var(--accent-soft); } .tl-when { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent2); font-weight:700; } .tl-title { font-weight:700; font-size:15px; margin:3px 0 5px; font-family:var(--font-head); line-height:1.2; } .tl-desc { font-size:13px; color:var(--muted); line-height:1.45; } @media (max-width:760px){ .timeline { grid-template-columns:1fr; } .tl-step { display:grid; grid-template-columns:38px 1fr; column-gap:14px; text-align:left; padding:0 0 22px; } .tl-dot { margin:0; } .tl-when,.tl-title,.tl-desc { grid-column:2; } .tl-step::before { top:38px; left:18px; width:2px; height:calc(100% - 38px); } .tl-step:first-child::before { display:block; } .tl-step:last-child::before { display:none; } } /* open-letter format */ .letter { font-family: var(--font-head); } .sigblock { margin-top: 4px; display: grid; grid-template-columns: repeat(2,1fr); gap: 4px 24px; } .sigblock span { border-bottom: 1px solid var(--line); padding: 6px 0; font-size: 14px; } .sig-1col .sigblock { grid-template-columns: 1fr; } @media (max-width: 760px){ .sigblock { grid-template-columns: 1fr; } } .grid-side { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap); align-items: start; } .grid-split { grid-template-columns: 1.8fr 1fr; } .sticky { position: sticky; top: 24px; } @media (max-width: 760px) { .grid-side { grid-template-columns: 1fr; } .sticky { position: static; } .ptitle { font-size: 24px; } .hero .ptitle { font-size: 28px; } } /* ---- Social share bar ---- */ .social { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .social-lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; } .soc { width: 34px; height: 34px; border-radius: 50%; border: var(--bw) solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--panel); cursor: pointer; transition: all .15s; } .soc:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .soc svg { width: 16px; height: 16px; fill: currentColor; } .social-strip { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; } /* ---- Dual preview: desktop + mobile side by side ---- */ .preview { display: flex; gap: 40px; align-items: flex-start; } .device-desktop { flex: 1 1 auto; min-width: 0; } .device-mobile { flex: 0 0 390px; } .device-bar { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; } .device iframe { width: 100%; border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--shadow); display: block; } .device-desktop iframe { height: 860px; border-radius: var(--radius); } .device-mobile iframe { height: 860px; border-radius: 28px; border-width: 8px; border-color: #222; } @media (max-width: 1180px){ .preview { flex-direction: column; } .device-mobile { flex: 0 0 auto; } } @media (max-width: 760px){ .device-desktop { display: none; } .device-mobile { flex: 1 1 auto; width: 100%; } } /* ============================================================ PRODUCTION ADDITIONS (not in the mockup harness) ============================================================ */ /* honeypot: removed from layout + a11y tree, kept in the DOM for bots */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* form status / validation */ .field-error { color: #b00020; font-size: 11px; margin: 4px 0 0; } .form-error { color: #b00020; font-size: 13px; margin: 12px 0 0; } .field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #b00020; } .btn[disabled] { opacity: .6; cursor: progress; } /* required-field marker */ .req { color: var(--accent2); } /* thank-you (Surface 1b) */ .thanks { text-align: center; padding: 8px 0; } .thanks h3 { margin: 0 0 10px; font-size: 22px; } .thanks p { margin: 0; color: var(--muted); } /* running count */ .sig-count { font-family: var(--font-head); font-weight: 800; font-size: 15px; margin: 0 0 14px; } .sig-count b { color: var(--accent2); } /* loading skeleton for the signer list */ .sig-loading { color: var(--muted); font-size: 13px; padding: 8px 0; } /* Turnstile spacing */ .cf-turnstile { margin: 6px 0 10px; }