/* ========================================================================== WebBack demonstration sites Standalone styles for the example sites at /demo/. These are deliberately separate from the WebBack marketing stylesheet: each demo is meant to look like its own business, not like WebBack. Three themes are driven by a class on : demo--trade, demo--pro and demo--local. Everything below reads from the custom properties they set. ========================================================================== */ @font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/manrope-latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* A fallback face with Manrope's own vertical metrics and matched average character width, so the page does not reflow when the real font arrives. Manrope: 2000 upm, ascent 2132, descent 600, no line gap. */ @font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("Roboto"), local("Segoe UI"); size-adjust: 102.7%; ascent-override: 103.8%; descent-override: 29.2%; line-gap-override: 0%; } :root { --wb-navy: #0a1f44; --wb-green: #00c853; --d-wrap: 1080px; --d-gutter: 20px; --d-radius: 14px; --d-radius-lg: 22px; --d-font: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Trades: high contrast, safety yellow on charcoal. */ .demo--trade { --ink: #12161f; --ink-soft: #4a5364; --surface: #ffffff; --band: #f4f6fa; --dark: #12161f; --on-dark: #ffffff; --on-dark-soft: #c2c9d6; --accent: #ffd400; --on-accent: #12161f; --accent-text: #6b5600; --line: #dfe3ea; } /* Professional services: ink and warm stone. */ .demo--pro { --ink: #17202e; --ink-soft: #4d566a; --surface: #ffffff; --band: #f6f4ef; --dark: #17202e; --on-dark: #ffffff; --on-dark-soft: #c6ccd8; --accent: #17202e; --on-accent: #ffffff; --accent-text: #7a5c30; --line: #e4e0d7; } /* Local services: warm blush and plum. */ .demo--local { --ink: #3a2231; --ink-soft: #6a5461; --surface: #ffffff; --band: #fff8f5; --dark: #3a2231; --on-dark: #ffffff; --on-dark-soft: #e3cdd8; --accent: #a4436d; --on-accent: #ffffff; --accent-text: #8d3159; --line: #f0dcd4; } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--d-font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, .d-kicker { margin: 0 0 0.5em; line-height: 1.2; letter-spacing: -0.02em; } h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; } h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.05rem); font-weight: 800; } h3 { font-size: 1.12rem; font-weight: 700; } h4, .d-kicker { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; } .d-dark :focus-visible, .d-footer :focus-visible, .d-topbar :focus-visible { outline-color: #ffffff; } .d-wrap { width: 100%; max-width: var(--d-wrap); margin-inline: auto; padding-inline: var(--d-gutter); } .d-section { padding: clamp(40px, 6vw, 72px) 0; } .d-section--tight { padding: clamp(28px, 4vw, 44px) 0; } .d-band { background: var(--band); } .d-dark { background: var(--dark); color: var(--on-dark); } .d-dark p { color: var(--on-dark-soft); } .d-dark h4, .d-dark .d-kicker { color: var(--accent); } .demo--pro .d-dark h4, .demo--pro .d-dark .d-kicker { color: #d8c49c; } .d-lead { font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem); color: var(--ink-soft); } .d-dark .d-lead { color: var(--on-dark-soft); } .d-muted { color: var(--ink-soft); } .d-small { font-size: 0.88rem; } .d-center { text-align: center; } .d-grid { display: grid; gap: 18px; } .d-grid > * { min-width: 0; } @media (min-width: 640px) { .d-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .d-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 640px) and (max-width: 899px) { .d-grid--3 { grid-template-columns: repeat(2, 1fr); } } /* ----------------------------------------------------- demonstration bar -- */ .d-topbar { position: sticky; top: 0; z-index: 60; background: var(--wb-navy); color: #ffffff; font-size: 0.82rem; line-height: 1.45; } .d-topbar .d-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 9px; } .d-topbar strong { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; flex: none; } .d-topbar strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wb-green); } .d-topbar span { color: #c8d3e6; flex: 1 1 260px; min-width: 0; } .d-topbar a { color: #ffffff; font-weight: 700; white-space: nowrap; padding: 6px 0; } /* ---------------------------------------------------------------- header -- */ .d-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); } .demo--trade .d-header { background: var(--dark); border-bottom-color: var(--dark); color: var(--on-dark); } .d-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; } .d-brand { font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; text-decoration: none; padding: 8px 0; } .d-nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; background: none; border: 1.5px solid currentColor; border-radius: 999px; font: inherit; font-size: 0.86rem; font-weight: 700; color: inherit; cursor: pointer; } .d-nav-toggle .bars { display: block; width: 15px; height: 2px; background: currentColor; position: relative; } .d-nav-toggle .bars::before, .d-nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 15px; height: 2px; background: currentColor; } .d-nav-toggle .bars::before { top: -5px; } .d-nav-toggle .bars::after { top: 5px; } .d-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); padding: 6px var(--d-gutter) 18px; } .d-nav.is-open { display: block; } .d-nav ul { list-style: none; margin: 0; padding: 0; } .d-nav li { border-bottom: 1px solid var(--line); } .d-nav li:last-child { border-bottom: 0; } .d-nav a { display: block; min-height: 44px; padding: 12px 2px; font-weight: 700; text-decoration: none; } .d-nav a[aria-current="page"] { color: var(--accent-text); } .d-nav .d-nav-cta { margin-top: 14px; } .d-nav .d-nav-cta .d-btn { width: 100%; } @media (min-width: 900px) { .d-nav-toggle { display: none; } .d-nav { display: flex; align-items: center; gap: 22px; position: static; padding: 0; border: 0; box-shadow: none; background: none; color: inherit; } .d-nav ul { display: flex; align-items: center; gap: 20px; } .d-nav li { border: 0; } .d-nav a { min-height: 0; padding: 8px 0; font-size: 0.95rem; font-weight: 600; } .d-nav a[aria-current="page"] { border-bottom: 2px solid currentColor; } .d-nav .d-nav-cta { margin: 0; } .d-nav .d-nav-cta .d-btn { width: auto; } } /* --------------------------------------------------------------- buttons -- */ .d-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; border: 2px solid transparent; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 800; font-size: 0.98rem; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; } .d-btn:hover { transform: translateY(-1px); } .d-btn--ghost { background: transparent; border-color: currentColor; color: inherit; } .d-btn--sm { min-height: 40px; padding: 8px 16px; font-size: 0.86rem; } .d-btn--block { display: flex; width: 100%; } .d-btns { display: flex; flex-wrap: wrap; gap: 10px; } .d-btns.d-center { justify-content: center; } .demo--trade .d-header .d-btn { background: var(--accent); color: var(--on-accent); } /* ------------------------------------------------------------------ hero -- */ .d-hero { padding: clamp(34px, 5vw, 62px) 0; } .demo--trade .d-hero { background: var(--dark); color: var(--on-dark); } .demo--trade .d-hero p { color: var(--on-dark-soft); } .demo--pro .d-hero { background: var(--band); } .demo--local .d-hero { background: linear-gradient(160deg, #fdeee8 0%, #f8dfe6 100%); } .d-hero-grid { display: grid; gap: 28px; align-items: center; } @media (min-width: 900px) { .d-hero-grid { grid-template-columns: 1.1fr 0.9fr; } } .d-strap { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; color: var(--accent-text); } .demo--trade .d-hero .d-strap { color: var(--accent); } .d-strip { background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 0.88rem; } .demo--pro .d-strip { background: var(--dark); color: var(--on-dark); } .d-strip .d-wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 12px; } /* ----------------------------------------------------------------- cards -- */ .d-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--d-radius); padding: 22px; } .d-card h3 { margin-bottom: 6px; } .d-card p { color: var(--ink-soft); font-size: 0.95rem; } .d-dark .d-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); } .d-dark .d-card p { color: var(--on-dark-soft); } .d-rows { margin: 0; } .d-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 0.96rem; } .d-row:last-child { border-bottom: 0; } .d-row b { font-weight: 800; white-space: nowrap; } .d-stats { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); text-align: center; } .d-stats b { display: block; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); font-weight: 800; line-height: 1.1; } .d-stats span { font-size: 0.82rem; color: var(--ink-soft); } .d-dark .d-stats span { color: var(--on-dark-soft); } .d-badges { display: flex; flex-wrap: wrap; gap: 8px; } .d-badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; padding: 6px 11px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-soft); } .d-dark .d-badge { border-color: rgba(255, 255, 255, 0.28); color: var(--on-dark-soft); } .d-shots { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .d-shots { grid-template-columns: repeat(4, 1fr); } } .d-shots--3 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .d-shots--3 { grid-template-columns: repeat(3, 1fr); } } .d-shot { position: relative; border-radius: var(--d-radius); overflow: hidden; border: 1px solid var(--line); } .d-shot img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .d-shot span { position: absolute; left: 8px; bottom: 8px; background: rgba(255, 255, 255, 0.94); color: #12161f; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; } .d-quote { font-size: 1.02rem; font-style: italic; margin-bottom: 8px; } .d-by { font-size: 0.84rem; color: var(--ink-soft); font-style: normal; } .d-dark .d-by { color: var(--on-dark-soft); } .d-map { height: 190px; border-radius: var(--d-radius); background: linear-gradient(0deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 100% 26px, linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 26px 100%, #eef1f6; position: relative; border: 1px solid var(--line); } .d-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); } /* ------------------------------------------------------------------- faq -- */ .d-faq { border-top: 1px solid var(--line); } .d-faq details { border-bottom: 1px solid var(--line); } .d-faq summary { list-style: none; cursor: pointer; min-height: 44px; padding: 16px 40px 16px 0; font-weight: 700; position: relative; } .d-faq summary::-webkit-details-marker { display: none; } .d-faq summary::after { content: ""; position: absolute; right: 8px; top: 24px; width: 10px; height: 10px; border-right: 2.5px solid var(--accent-text); border-bottom: 2.5px solid var(--accent-text); transform: rotate(45deg); transition: transform 0.18s ease; } .d-faq details[open] summary::after { transform: rotate(-135deg); top: 28px; } .d-faq .d-faq-body { padding: 0 0 18px; color: var(--ink-soft); max-width: 68ch; } /* ------------------------------------------------------------------ form -- */ .d-field { margin-bottom: 16px; } .d-field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; } .d-field input, .d-field textarea, .d-field select { width: 100%; min-height: 46px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 9px; } .d-field textarea { min-height: 110px; resize: vertical; } .d-field input:focus, .d-field textarea:focus, .d-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.09); } /* ---------------------------------------------------------------- footer -- */ .d-footer { background: var(--dark); color: var(--on-dark-soft); padding: 34px 0 26px; font-size: 0.92rem; } .d-footer .d-wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; } .d-footer a { color: #ffffff; } .d-demo-foot { background: var(--wb-navy); color: #c8d3e6; padding: 26px 0; font-size: 0.9rem; } .d-demo-foot a { color: #ffffff; font-weight: 700; } .d-demo-foot p { max-width: 70ch; } /* --------------------------------------------------------- demo notice -- */ .d-notice-backdrop { position: fixed; inset: 0; background: rgba(10, 31, 68, 0.6); display: grid; place-items: center; padding: 20px; z-index: 100; } .d-notice-backdrop[hidden] { display: none; } .d-notice { background: #ffffff; color: var(--wb-navy); border-radius: 18px; padding: 28px 26px 24px; max-width: 420px; width: 100%; box-shadow: 0 30px 70px rgba(10, 31, 68, 0.35); font-family: var(--d-font); } .d-notice h2 { font-size: 1.22rem; margin-bottom: 10px; color: var(--wb-navy); } .d-notice p { font-size: 0.96rem; color: #56658a; } .d-notice .d-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .d-notice button, .d-notice a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer; text-decoration: none; } .d-notice .d-notice-primary { background: var(--wb-green); color: var(--wb-navy); } .d-notice .d-notice-secondary { background: transparent; border-color: #c6d2e3; color: var(--wb-navy); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }