/* Shared by all six pages, in both languages. Light is the default declaration; dark arrives either from the system or from an explicit choice stamped on by theme.js. Every colour is declared once in the light block, so nothing can exist only in dark. */ :root { --bg: #f4f6f8; --surface: #ffffff; --raised: #ebeef3; --stroke: #e1e6ed; --accent: #18a957; --accent-from: #15b45c; --accent-to: #0c7f52; --text: #11141a; --body: #2c333f; --muted: #4a5464; --shadow: 0 1px 2px rgba(17, 20, 26, 0.04); --radius: 22px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0b0d; --surface: #15171c; --raised: #1e2128; --stroke: #2a2f38; --accent: #5ad983; --accent-from: #2e9e5b; --accent-to: #14624a; --text: #f5f7fa; --body: #dfe4ec; --muted: #99a2b0; --shadow: none; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0a0b0d; --surface: #15171c; --raised: #1e2128; --stroke: #2a2f38; --accent: #5ad983; --accent-from: #2e9e5b; --accent-to: #14624a; --text: #f5f7fa; --body: #dfe4ec; --muted: #99a2b0; --shadow: none; color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; } /* Header ------------------------------------------------------------- */ header { padding: 24px 0; } .bar { display: flex; align-items: center; gap: 16px; } .mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 20px; margin-right: auto; } .mark img { width: 38px; height: 38px; border-radius: 10px; } .switch { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--stroke); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); } .switch a, .switch button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); padding: 6px 13px; border-radius: 999px; text-decoration: none; line-height: 1.2; } .switch a[aria-current="true"] { background: var(--raised); color: var(--text); } .switch button:hover { color: var(--text); } .theme-toggle { padding: 6px 10px !important; font-size: 15px !important; } /* Hero --------------------------------------------------------------- */ .hero { padding: 48px 0 72px; display: grid; gap: 56px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 860px) { .hero { grid-template-columns: 1.05fr 0.95fr; } } .hero h1 { font-size: clamp(36px, 5.6vw, 56px); line-height: 1.07; letter-spacing: -0.02em; margin: 0 0 20px; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--accent); } .lede { font-size: 19px; color: var(--muted); margin: 0 0 28px; max-width: 30em; } .cta { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--accent-from), var(--accent-to)); color: #fff; text-decoration: none; font-weight: 650; padding: 15px 26px; border-radius: 999px; } .note { color: var(--muted); font-size: 15px; margin-top: 14px; } .phone { justify-self: center; } .phone img { width: 100%; max-width: 310px; border-radius: 34px; border: 1px solid var(--stroke); display: block; box-shadow: var(--shadow); } /* Sections ----------------------------------------------------------- */ section { padding: 72px 0; border-top: 1px solid var(--stroke); } h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.015em; margin: 0 0 12px; font-weight: 750; } .sub { color: var(--muted); margin: 0 0 40px; max-width: 46em; } .grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .grid.three { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); } .card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 680; } .card p { margin: 0; color: var(--muted); font-size: 16px; } .shots { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 760px) { .shots { grid-template-columns: repeat(3, 1fr); } } .shot img { width: 100%; border-radius: 22px; border: 1px solid var(--stroke); display: block; box-shadow: var(--shadow); } .shot p { color: var(--muted); font-size: 15px; margin: 14px 2px 0; } .split { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } } .split img { width: 100%; max-width: 300px; border-radius: 30px; border: 1px solid var(--stroke); display: block; box-shadow: var(--shadow); } ul.ticks { list-style: none; padding: 0; margin: 22px 0 0; } ul.ticks li { padding-left: 30px; position: relative; margin-bottom: 12px; color: var(--muted); } ul.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } ul.ticks li b { color: var(--text); font-weight: 620; } .price { display: inline-block; background: var(--raised); border: 1px solid var(--stroke); border-radius: 999px; padding: 9px 18px; font-size: 15px; color: var(--muted); margin-top: 6px; } .price b { color: var(--text); } /* Legal pages -------------------------------------------------------- */ .doc { max-width: 680px; margin: 0 auto; padding: 0 24px 96px; } .doc h1 { font-size: 38px; letter-spacing: -0.02em; margin: 28px 0 6px; } .doc .updated { color: var(--muted); font-size: 15px; margin: 0 0 40px; } .doc h2 { font-size: 21px; margin: 44px 0 10px; } .doc p, .doc li { color: var(--body); } .doc .lead { font-size: 19px; color: var(--text); } .doc ul { padding-left: 22px; } .doc li { margin-bottom: 10px; } .box { background: var(--surface); border: 1px solid var(--stroke); border-radius: 18px; padding: 22px 24px; margin: 28px 0; box-shadow: var(--shadow); } .box p { margin: 0; color: var(--muted); } footer { padding: 48px 0 72px; border-top: 1px solid var(--stroke); color: var(--muted); font-size: 15px; } footer a { margin-right: 20px; } .doc footer { padding: 28px 0 0; margin-top: 64px; }