/* Honeypot — screen-reader accessible but invisible to real users */ .hp-field { all: unset; display: block; width: 0; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; opacity: 0; pointer-events: none; user-select: none; clip: rect(0 0 0 0); white-space: nowrap; } @font-face { font-family: hel-med; src: url(fonts/helvetica-now-display/HelveticaNowDisplay-Medium.ttf); } @font-face { font-family: hel-bold; src: url(fonts/helvetica-now-display/HelveticaNowDisplay-Bold.woff); } @font-face { font-family: hel-reg; src: url(fonts/helvetica-now-display/HelveticaNowDisplay-Regular.ttf); } @font-face { font-family: hel-blk; src: url(fonts/helvetica-now-display/HelveticaNowDisplay-Black.ttf); } * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* ── Grays ────────────────────────────── */ --gray-100: #fdfdfd; --gray-200: #f5f4f4; --gray-300: #d4d2d2; --gray-400: #b2b2b2; --gray-500: #949191; --gray-600: #6e6c6c; --gray-700: #4a4848; --gray-800: #2e2c2c; --gray-900: #1a1818; --gray-1000: #060606; /* ── Accent 1 — olive green ───────────── */ --accent_1-100: #f0f2e8; --accent_1-200: #d6dbb8; --accent_1-300: #b0bb7a; --accent_1-400: #9daa5e; --accent_1: #7d8c3f; --accent_1-600: #5a6428; --accent_1-800: #3a4118; /* ── Accent 2 — teal ──────────────────── */ --accent_2-100: #e6f4f7; --accent_2-200: #b3dde6; --accent_2-300: #4db0c5; --accent_2: #007d94; --accent_2-600: #005a6b; --accent_2-800: #003d4a; /* ── Semantic ────────────────────────── */ --secondary: #1a1818; /* ── Loader & misc ────────────────────── */ --loa-width: 0%; scroll-behavior: auto !important; } /* ================================================================ THEMES — applied as class on ================================================================ */ html.theme-sand { --gray-100: #faf6f0; --gray-200: #f0e9de; --gray-300: #d9cabb; --gray-400: #bfab96; --gray-500: #9e8a72; --gray-600: #7a6650; --gray-700: #5a4a38; --gray-800: #3d3025; --gray-900: #261e14; --gray-1000: #100c07; --accent_1-100: #faeee8; --accent_1-200: #f0c5b0; --accent_1-300: #de9474; --accent_1-400: #cc7855; --accent_1: #c45c3a; --accent_1-600: #9a3f22; --accent_1-800: #6b2713; --accent_2-100: #f2ece4; --accent_2-200: #d4b89a; --accent_2-300: #a87e55; --accent_2: #7b4b2a; --accent_2-600: #5a3318; --accent_2-800: #3a1f0c; --secondary: #261e14; } html.theme-slate { --gray-100: #f4f6f8; --gray-200: #e8ecf0; --gray-300: #c8d0d9; --gray-400: #a4b0bc; --gray-500: #7e8e9c; --gray-600: #5c6e7d; --gray-700: #3e4f5d; --gray-800: #283542; --gray-900: #17222d; --gray-1000: #090e13; --accent_1-100: #e4edf6; --accent_1-200: #b8d0e8; --accent_1-300: #7aadd2; --accent_1-400: #5694c8; --accent_1: #3a7abd; --accent_1-600: #265a93; --accent_1-800: #183c66; --accent_2-100: #e8eef4; --accent_2-200: #b8ccd9; --accent_2-300: #7a9fb5; --accent_2: #3d6f8a; --accent_2-600: #27506a; --accent_2-800: #183449; --secondary: #17222d; } html.theme-dark { --gray-100: #111111; --gray-200: #1c1c1c; --gray-300: #2e2e2e; --gray-400: #444444; --gray-500: #666666; --gray-600: #888888; --gray-700: #aaaaaa; --gray-800: #cccccc; --gray-900: #e8e8e8; --gray-1000: #f5f5f5; --accent_1-100: #1e2210; --accent_1-200: #3a4120; --accent_1-300: #6a7838; --accent_1-400: #849e48; --accent_1: #9db050; --accent_1-600: #b8cc70; --accent_1-800: #d4e498; --accent_2-100: #0a1f24; --accent_2-200: #163644; --accent_2-300: #2a6577; --accent_2: #3a9bb5; --accent_2-600: #5abdd4; --accent_2-800: #88d4e5; --secondary: #e8e8e8; } html.theme-vibrant { --gray-100: #ffffff; --gray-200: #f2f2f2; --gray-300: #d5d5d5; --gray-400: #b0b0b0; --gray-500: #888888; --gray-600: #606060; --gray-700: #404040; --gray-800: #242424; --gray-900: #111111; --gray-1000: #000000; --accent_1-100: #edf7e0; --accent_1-200: #c6e89c; --accent_1-300: #92d248; --accent_1-400: #74bb24; --accent_1: #5ca800; --accent_1-600: #3d7a00; --accent_1-800: #235000; --accent_2-100: #e0f0ff; --accent_2-200: #9acfff; --accent_2-300: #4aabff; --accent_2: #0077e6; --accent_2-600: #0055b0; --accent_2-800: #003578; --secondary: #111111; } body { background-color: var(--gray-100) !important; font-family: hel-reg; } .primary-button { width: fit-content; display: block; text-decoration: none; border: 2px solid var(--accent_1-600); padding: 8px 22px; border-radius: 10px; font-size: 15px; background-color: var(--accent_1-800); color: var(--accent_1-100); transition: 0.3s; text-align: center; font-family: hel-med; cursor: pointer; } .primary-button:hover { background-color: var(--accent_1-600); color: var(--accent_1-100); } .primary-button.inverted { background-color: var(--accent_1-100); color: var(--accent_1-800); border-color: var(--accent_1-200); } .primary-button.inverted:hover { background-color: var(--gray-100); color: var(--accent_1-800); } .secondary-button { width: fit-content; display: block; text-decoration: none; border: 2px solid var(--accent_1-300); padding: 8px 22px; border-radius: 10px; font-size: 15px; background-color: var(--accent_1-100); color: var(--accent_1-800); transition: 0.3s; text-align: center; font-family: hel-med; cursor: pointer; } .secondary-button:hover { background-color: var(--accent_1-200); color: var(--accent_1-800); } .bold { padding: 5px 10px; line-height: 1; border-radius: 5px; background-color: var(--accent_1-600); color: var(--accent_1-200); font-family: hel-bold; text-transform: uppercase; } .heading-normal { color: var(--accent_1-600); font-size: 50px; font-weight: 600; margin: 0; font-family: hel-bold; } @media (max-width: 768px) { .primary-button, .secondary-button { padding: 7px 18px; font-size: 14px; } }