@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); /* ============================================================ THEME TOKENS ------------------------------------------------------------ The :root block is the *default* (dark) palette — any browser without a color-scheme preference still gets a coherent design. @media (prefers-color-scheme: light) overrides every token. .theme-dark / .theme-light on force a palette regardless of the OS preference (user toggle, force-mode, etc.). Both palettes define the *same set of tokens*. A token missing from one mode falls through to the default and silently breaks widgets that depend on it — so any new token must be added here. ============================================================ */ /* ---------- DARK (default) ---------- */ :root { /* Surfaces — ascending lift from page → card → elevated */ --bg-color: #0f0f0f; --bg-color-translucent: #0f0f0f99; --page-color: #0f0f0f; --container: #161616; --container-secondary: #787a7a; --surface: #1c1b1b; --surface-variant: #161717; --elevated-surface: #202222; --elevated-highlight: #242626; --elevated: #2d2d2d; --on-surface: #f1f1f1; /* Inputs */ --field-fill: #1c1b1b99; /* Borders & dividers */ --border-color: #2d2d2d; --border-highlight: #3b3a3a; --divider-color: #4f4f4f; --dark-border: #2d2d2d; /* Shadows */ --shadow-color: #00000099; --light-shadow: transparent; --elevated-shadow-color: #00000066; /* Overlays */ --overlay: #000000b0; --overlayVariant: rgba(0, 0, 0, 0.55); /* Brand & accents */ --blue: #3ea5ff; --green: #3fbb46; --red: #ff3b4a; /* States */ --error: #e74967; --error-muted: #2a2028; --warning: #ffcd45; --warning-muted: #3a3100; /* Text */ --text-primary: #f1f1f1; --text-primary-inverted: #0f0f0f; --text-intermediate: #e1e1e1; --text-secondary: #aaaaaa; --text-secondary-intermediate: #8f8f8f; --text-tertiary: #71767b; --text-blue: var(--blue); --text-error: #f25f5c; --text-gold: #fdd182; /* Icons */ --icon-shade: #b6b6b6; /* Theme metadata — lets browsers pick form/scrollbar styles */ color-scheme: dark; } /* ---------- LIGHT ---------- */ @media (prefers-color-scheme: light) { :root { /* Surfaces — in light, the page is the "low" gray, cards are white, and "elevated" things stand out as a subtle gray (since they can't go any whiter than #fff). The lift direction inverts but the semantic ("more contrast vs container") is preserved. */ --bg-color: #f4f5f7; --bg-color-translucent: #f4f5f7cc; /* keep more opaque on light — frosted glass over white image is too faint otherwise */ --page-color: #f4f5f7; --container: #ffffff; --container-secondary: #87898c; --surface: #ffffff; --surface-variant: #ebecef; --elevated-surface: #f1f2f5; --elevated-highlight: #ebecef; --elevated: #e8eaee; --on-surface: #0f0f0f; /* Inputs — slight tint so borders are visible on the white card */ --field-fill: #ffffff; /* Borders & dividers */ --border-color: #e3e3e7; --border-highlight: #d0d0d6; --divider-color: #e8e8eb; --dark-border: transparent; /* Shadows — softer in light mode so cards sit on the page */ --shadow-color: #0000001a; --light-shadow: #0000000d; --elevated-shadow-color: #00000018; /* Overlays */ --overlay: #ffffffd0; --overlayVariant: rgba(255, 255, 255, 0.7); /* Brand & accents — slightly darker on white for AA contrast */ --blue: #0a66d6; --green: #1c8730; --red: #d4283b; /* States */ --error: #d52e44; --error-muted: #fde7eb; --warning: #b88500; --warning-muted: #fff4d6; /* Text */ --text-primary: #0f0f0f; --text-primary-inverted: #f1f1f1; --text-intermediate: #232020; --text-secondary: #5a5a5e; --text-secondary-intermediate: #737378; --text-tertiary: #93939a; --text-blue: var(--blue); --text-error: var(--error); --text-gold: #8a6500; /* Icons */ --icon-shade: #2a2a2e; color-scheme: light; } } /* ---------- EXPLICIT FORCED MODES ---------- .theme-dark / .theme-light on wins over the OS preference. Useful for a user-controlled toggle, marketing pages that need a fixed scheme, or QA / screenshot tooling. */ html.theme-light { --bg-color: #f4f5f7; --bg-color-translucent: #f4f5f7cc; /* keep more opaque on light — frosted glass over white image is too faint otherwise */ --page-color: #f4f5f7; --container: #ffffff; --container-secondary: #87898c; --surface: #ffffff; --surface-variant: #ebecef; --elevated-surface: #f1f2f5; --elevated-highlight: #ebecef; --elevated: #e8eaee; --on-surface: #0f0f0f; --field-fill: #ffffff; --border-color: #e3e3e7; --border-highlight: #d0d0d6; --divider-color: #e8e8eb; --dark-border: transparent; --shadow-color: #0000001a; --light-shadow: #0000000d; --elevated-shadow-color: #00000018; --overlay: #ffffffd0; --overlayVariant: rgba(255, 255, 255, 0.7); --blue: #0a66d6; --green: #1c8730; --red: #d4283b; --error: #d52e44; --error-muted: #fde7eb; --warning: #b88500; --warning-muted: #fff4d6; --text-primary: #0f0f0f; --text-primary-inverted: #f1f1f1; --text-intermediate: #232020; --text-secondary: #5a5a5e; --text-secondary-intermediate: #737378; --text-tertiary: #93939a; --text-blue: var(--blue); --text-error: var(--error); --text-gold: #8a6500; --icon-shade: #2a2a2e; color-scheme: light; } html.theme-dark { --bg-color: #0f0f0f; --bg-color-translucent: #0f0f0f99; --page-color: #0f0f0f; --container: #161616; --container-secondary: #787a7a; --surface: #1c1b1b; --surface-variant: #161717; --elevated-surface: #202222; --elevated-highlight: #242626; --elevated: #2d2d2d; --on-surface: #f1f1f1; --field-fill: #1c1b1b99; --border-color: #2d2d2d; --border-highlight: #3b3a3a; --divider-color: #4f4f4f; --dark-border: #2d2d2d; --shadow-color: #00000099; --light-shadow: transparent; --elevated-shadow-color: #00000066; --overlay: #000000b0; --overlayVariant: rgba(0, 0, 0, 0.55); --blue: #3ea5ff; --green: #3fbb46; --red: #ff3b4a; --error: #e74967; --error-muted: #2a2028; --warning: #ffcd45; --warning-muted: #3a3100; --text-primary: #f1f1f1; --text-primary-inverted: #0f0f0f; --text-intermediate: #e1e1e1; --text-secondary: #aaaaaa; --text-secondary-intermediate: #8f8f8f; --text-tertiary: #71767b; --text-blue: var(--blue); --text-error: #f25f5c; --text-gold: #fdd182; --icon-shade: #b6b6b6; color-scheme: dark; } /* ---------- THEME-AGNOSTIC CONSTANTS ---------- Layout, typography, and brand colors that read the same on both palettes (saturated CTAs with white text work on both white and dark surfaces). --dark intentionally aliases --text-primary so legacy callers (e.g. .h_lnk) follow the active theme. */ :root { --header-height: 66px; --dark: var(--text-primary); --button-blue: #0066ff; --button-on-blue: #ffffff; --placeholder-color: #9d9d9d; --red-text: #e9336f; --pale-blue: #7ea3cc; --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-body: Inter, var(--font-fallback); --green1: #00a184; --green1Light: #f4fddb; } * { font-family: var(--font-body); font-optical-sizing: auto; box-sizing: border-box; margin: 0; padding: 0; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-secondary); -webkit-box-shadow: 0 0 0px 2rem var(--field-fill) inset; } input:focus { outline: var(--border-color) solid 3px; } .bg { background-color: var(--bg-color); } .text_primary { color: var(--text-primary) !important; } .text_gold { color: var(--text-gold) !important; } .text_secondary { color: var(--text-secondary) !important; } .text_intermediate { color: var(--text-intermediate) !important; } .text_tertiary { color: var(--text-tertiary) !important; } .thin { font-weight: 300 !important; } /* LOGO STYLE */ .s_lgo-1, .s_lgo-2, .s_lgo-3 { stroke-width: 0px; } .s_lgo-3 { fill: var(--text-intermediate) !important; } .s_lgo-1 { fill: var(--icon-shade) !important; } .s_lgo-2 { fill: var(--text-primary) !important; } /* END */ html { font-size: 16px; scrollbar-gutter: stable; } body { margin: 0; padding: 0; place-content: center; min-block-size: 100%; font-family: system-ui, sans-serif; line-height: 1.375; color: var(--text-primary); background-color: var(--bg-color); position: relative; display: flex; flex-direction: column; min-height: 100vh; max-width: 1920px; margin: 0 auto; } .page_content { background-color: var(--page-color); } header { display: block; z-index: 100; top: 0; left: 0; background-color: var(--bg-color-translucent); } h1 { font-size: 2.5rem; } h2 { font-size: 1.8rem; font-weight: 500; } div { position: relative; } .header_min { padding: 50px 40px 0px 40px; background-color: transparent !important; position: fixed; width: 100%; box-sizing: border-box; } .header_app { position: -webkit-sticky; position: sticky; top: 0; padding: 0px 30px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; } .header_app::after { display: relative; } .h_ico_box { height: 34px; } .header_app .h_ico_box svg { height: 34px; } .h_lnk_box { line-height: 40px; } @media only screen and (max-width: 800px) { .header_min { padding: 20px 20px; max-width: 100vw; } } @media screen and (max-width: 640px) { .header_app { padding: 5px 14px; } .h_search_bx { display: none !important; } .header_app .h_ico_box svg { height: 30px; display: inline-block; margin-top: 5px; } .rnd_l { border-radius: 0 !important; } .post { border-left: none !important; } } @media screen and (max-width: 1420px) { } .surface { background-color: var(--surface); } .rnd { border-radius: 14px; } .rnd_l { border-radius: 14px; } .ctnr { border: solid 1px var(--dark-border); box-shadow: var(--light-shadow) 0px 2px 14px; } .f_ph { height: 100vh; } .flx { display: flex; } .flx_start{ align-items: flex-start; } .li_row { display: flex; align-items: center; } .li_dets { flex-grow: 1; } .gap-10{ gap: 10px; } .cntnr { position: relative; } .v_flx { display: flex; flex-direction: column; } .a_center { align-items: center; } .spc_btwn { display: flex; justify-content: space-between; } .text_primary { color: var(--text-primary) !important; } .text_dark { color: var(--text-primary) !important; } .text_error { color: var(--text-error) !important; } .text_blue { color: var(--text-blue) !important; } .flx_2 { position: relative; flex-basis: 50%; flex-grow: 6; } .t_cntr{ text-align: center; } .h_lnk { color: var(--dark); text-decoration: none; font-weight: 300; } .form-group { display: block; margin-bottom: 15px; } .form-group input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; } .form-group label { position: relative; cursor: pointer; } .form-group label:before { content: ""; -webkit-appearance: none; background-color: transparent; border: 2px solid #ababab; border-radius: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 12px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 5px; } .form-group input:checked + label:before { background-color: black; border-color: black; } .form-group input:checked + label:after { content: ""; display: block; position: absolute; top: 2px; left: 11px; width: 6px; height: 14px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .pb20 { padding-bottom: 20px; } .pb40 { padding-bottom: 40px; } .btn_ldr { display: inline-block; vertical-align: middle; padding: 0; } .ldng { display: none; } .loading .ntldng { display: none !important; } .loading .ldng { display: initial !important; } .loader { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border: 2px solid var(--text-secondary); border-top-color: transparent; border-radius: 50%; transform: translate(-50%, -50%); z-index: 11; display: none; } .loader { animation: spin 1s linear infinite; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /** Buttons */ button { line-height: 1; cursor:pointer; } .btn { background-color: var(--blue); color: var(--text-primary-inverted); padding: 6px 20px; border: none; border-radius: 50px; } .btn_main { font-size: 18px; font-weight: 500; } .btn_white { background-color: white; } .txt_btn { color: var(--text-secondary); cursor: pointer; display: flex; align-self: flex-start; line-height: 1; } .txt_btn.primary { color: var(--blue); } .txt_btn:hover { color: var(--text-primary) !important; } .txt_btn .btn_txt { line-height: 1.375; } .outln_btn { display: inline-block; color: var(--text-secondary); border: none; padding: 5px 20px; box-sizing: border-box; cursor: pointer; min-width: 80px; text-align: center; border-radius: 6px; border: solid 1px var(--border-color); } .outln_btn.primary{ color: var(--text-primary); border-color: var(--border-highlight); } .outln_btn.secondary{ color: var(--text-secondary); border-color: var(--border-highlight); } .outln_btn:hover { color: var(--text-primary); } .outln_btn.pssv { color: var(--text-tertiary); border-color: var(--border-color); } /** Widths */ .w100 { width: 100%; } /** Basic theme declarations */ .thme_b { &.thme_bck { background-color: color-mix(in oklab, var(--green1Light), transparent 75%); } } .bx_sdw { box-shadow: var(--light-shadow) 0px 8px 24px; } .ico-btn { padding: 10px; border-radius: 50%; font-size: 24px; display: inline-block; margin: 0 10px; color: var(--text-secondary); background-color: var(--elevated); cursor: pointer; line-height: 0; } .ico-btn.cmpct { padding: 10px; margin: 0 0px; } .ico-btn.white{ background-color: #fff; color: #202222; } .ico-actn { font-size: 25px; display: inline-block; color: var(--text-secondary-intermediate); cursor: pointer; } .ico-img { border-radius: 50%; font-size: 36px; display: inline-block; color: var(--text-secondary); cursor: pointer; } .ico-selected { color: var(--text-primary); } .ico-passive { color: var(--text-tertiary); } .field_plhldr { position: absolute; left: 14px; top: 50%; font-size: 22px; transform: translateY(-50%); cursor: pointer; color: var(--text-secondary); } /* font sizes */ .fv_dwn { vertical-align: bottom; } .fs12 { font-size: 12px !important; } .fs13 { font-size: 13px !important; } .fs15 { font-size: 15px !important; } .fs32 { font-size: 32px !important; } .fs28 { font-size: 32px !important; } .fs22 { font-size: 22px !important; } .fs14 { font-size: 14px !important; } .fs16 { font-size: 16px !important; } .fs18 { font-size: 18px !important; } .t_ctnr { text-align: center; } .mxl2 { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; } .btn_tag_lg { line-height: 34px; } .v_spcr { height: 20px; } .v_spcr10 { height: 10px; } .v_spcr14 { height: 14px; } .li_opt { padding: 12px 10px; border-radius: 50px; cursor: pointer; display: flex; .li_opt_img { font-size: 28px; line-height: 1; color: var(--text-secondary); } .li_opt_dets { margin-left: 16px; font-size: 18px; line-height: 1.5; color: var(--text-intermediate); } } .li_opt:hover { background-color: var(--elevated-highlight); } .ilnk { text-decoration: none; background: none; } .pd_tp_10 { padding-top: 10px; } .pd_bm_4 { padding-bottom: 4px; } .pd_tp_20 { padding-top: 20px; } .large2 { margin: 14px 20px 10px 0; font-size: 32px; font-weight: 600; line-height: 1.3; color: var(--text-primary); } .rel { position: relative; } .dot::before { content: " • "; color: var(--text-tertiary); font-size: 12px; } .pd_h_4 { padding: 0 4px; } .min-320 { min-width: 320px !important; } .r { right: 0; } .l { left: 0; } .drop_button { /* Reset