/* Sell Food Online landing page.
Extracted from the design export that used to sit inline in
page-templates/sell-food-online.php. Order matters and follows the export:
1. Inter + Lora subsets from Google Fonts
2. the design system global stylesheet (it already contains the portable
and internal stylesheets, which the export had pasted in twice more)
3. page base styles
4. page integration and the static replacements for what dc-runtime used to
do in the browser */
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-normal-cyrillic-ext.ca157063.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-normal-cyrillic.71d5ee93.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-normal-greek-ext.6e9e020a.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-normal-greek.1be3448e.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-normal-vietnamese.5c66f9e0.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-normal-latin-ext.34b9c504.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-normal-latin.3100e775.woff2") format('woff2');
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-normal-cyrillic-ext.ca157063.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-normal-cyrillic.71d5ee93.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-normal-greek-ext.6e9e020a.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-normal-greek.1be3448e.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-normal-vietnamese.5c66f9e0.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-normal-latin-ext.34b9c504.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-normal-latin.3100e775.woff2") format('woff2');
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-normal-cyrillic-ext.ca157063.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-normal-cyrillic.71d5ee93.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-normal-greek-ext.6e9e020a.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-normal-greek.1be3448e.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-normal-vietnamese.5c66f9e0.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-normal-latin-ext.34b9c504.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-normal-latin.3100e775.woff2") format('woff2');
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-cyrillic-ext.4719a0a9.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-cyrillic.5a2b8761.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-math.7dd3c901.woff2") format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-symbols.7470e5e1.woff2") format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-vietnamese.4d390c48.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-latin-ext.00eee1f3.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-latin.dd02a01a.woff2") format('woff2');
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;
}
/* Cakesify global stylesheet, the compiler's entry point.
Tokens and base element styles live in colors_and_type.css. */
/* ==========================================================================
Cakesify design system, internal stylesheet
This file is for the design system project itself. It pulls in the
portable stylesheet and adds two things that only make sense here:
1. Unscoped base styles, so the preview cards in preview/ render without
each one needing a .cy-root wrapper.
2. Short aliases (--ink, --fg-2, --sp-4 and so on) that the older preview
cards and UI kits still reference.
Do not ship this file into another application. It sets styles on html,
body and bare element selectors, and the short aliases are generic enough
to collide with a host application's own tokens. Use cakesify.css for
that, which is scoped and prefixed.
========================================================================== */
/* ==========================================================================
Cakesify design system
Portable stylesheet. Safe to drop into an existing application.
Two things make it safe to embed:
1. Every custom property is prefixed --cy-. Nothing generic like --ink or
--space-4, so there is nothing for a host application's tokens to
collide with.
2. Every style rule is scoped under .cy-root. The file sets no styles on
html, body, or bare element selectors, so it cannot reach outside the
container you put it in.
Usage:
... your Cakesify UI ...
Contrast ratios in the comments are measured against the surface the token
is used on, not estimated.
========================================================================== */
/* --------------------------------------------------------------------------
Fonts
Inter carries headings and all interface text. Lora appears rarely, as a
single italic phrase inside an Inter heading.
Inter is self-hosted from fonts/, which needs to sit alongside this file.
If the host application already loads Inter, these declarations are
harmless: same family, same metrics, whichever wins looks identical.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Inter';
src: url("../fonts/inter-normal-variable.0be2399e.ttf") format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url("../fonts/inter-italic-variable.6136f733.ttf") format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* cyrillic-ext */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-cyrillic-ext.0398dc53.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-cyrillic.5d64634e.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-math.d8daf7fd.woff2") format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-symbols.67ff0cb6.woff2") format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-vietnamese.8b7ec384.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-latin-ext.7c0a9334.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-latin.a04ea08d.woff2") format('woff2');
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-cyrillic-ext.0398dc53.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-cyrillic.5d64634e.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-math.d8daf7fd.woff2") format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-symbols.67ff0cb6.woff2") format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-vietnamese.8b7ec384.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-latin-ext.7c0a9334.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-italic-latin.a04ea08d.woff2") format('woff2');
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-normal-cyrillic-ext.81c85205.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-normal-cyrillic.e3fd725f.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-normal-math.c431684e.woff2") format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-normal-symbols.11731f33.woff2") format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-normal-vietnamese.f0f9fd98.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-normal-latin-ext.d94e3720.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-normal-latin.b2db3fb8.woff2") format('woff2');
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-normal-cyrillic-ext.81c85205.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-normal-cyrillic.e3fd725f.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-normal-math.c431684e.woff2") format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-normal-symbols.11731f33.woff2") format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-normal-vietnamese.f0f9fd98.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-normal-latin-ext.d94e3720.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/lora-normal-latin.b2db3fb8.woff2") format('woff2');
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;
}
/* --------------------------------------------------------------------------
Tokens
Declared on :root and on .cy-root. The :root copy lets a standalone page
read them anywhere. The .cy-root copy means the system still works if the
host application strips or overrides :root, and it lets you run two themes
side by side later by redeclaring on a container.
-------------------------------------------------------------------------- */
:root,
.cy-root {
/* Brand ------------------------------------------------------------------
These are base hexes. A gradient may sit on top of them. */
--cy-brand-primary: #fd3477; /* the mark, and the one action */
--cy-brand-primary-a11y: #e11557; /* 4.72:1 with white */
--cy-brand-secondary: #008489; /* 4.50:1 with white, nothing spare, so it fails on
any tint. Use --cy-action-secondary-active for
teal text on #edfafa. */
--cy-brand-ink: #282828; /* 13.9:1 on white */
/* Actions ----------------------------------------------------------------
Pink is scarce. One filled pink action per screen, at most. */
--cy-action-primary: #fd3477; /* 3.54:1 with white, so large type only */
--cy-action-primary-small: #e11557; /* 4.72:1, use under 18.66px */
--cy-action-primary-hover: #e11557;
--cy-action-primary-active: #c30f49;
--cy-action-secondary: #008489; /* 4.50:1, no margin, never tint lighter */
--cy-action-secondary-hover: #026f73;
--cy-action-secondary-active: #015b5f; /* 7.38:1 on #edfafa, for teal text on the tint */
--cy-action-outline-bg: #ffffff;
--cy-action-outline-border: #000000; /* the only pure black in the system */
--cy-action-outline-label: #282828;
/* The dashboard is a work tool someone opens every day. A calmer accent
suits it, and it keeps pink scarce on the buyer side. */
--cy-action-work: #04806A; /* 4.88:1 with white */
--cy-action-work-hover: #026746; /* 6.93:1 with white */
/* Gradients --------------------------------------------------------------
Two, and no more. */
/* Marketing CTA. White sits at 3.31:1 on the light stop, so this surface
only takes a label at 24px/400 or 18.66px/600 and above. */
--cy-gradient-primary: linear-gradient(195deg, #FF4280 14%, #FA244C 100%); /* @kind other */
/* Dashboard CTA. 4.88:1 on the light stop, 6.93:1 on the dark. Legible at
any size. The light stop came down from #058971, which measured 4.35:1
and missed AA. The change is not visible. */
--cy-gradient-work: linear-gradient(201deg, #04806A 14%, #026746 100%); /* @kind other */
/* Belongs to the mark. Not a UI surface. */
--cy-gradient-mark: radial-gradient(circle, #f978a0 0%, #ff2961 56%); /* @kind other */
/* Text ------------------------------------------------------------------- */
--cy-text-heading: #282828; /* 13.9:1 on white */
--cy-text-body: #525252; /* 7.81:1 on white */
--cy-text-muted: #737373; /* 4.74:1 on white, the floor. On a tint it drops below
AA: 4.35:1 on #f5f5f5, 4.44:1 on #edfafa. Use
--cy-text-body on any tinted surface. */
--cy-text-on-fill: #ffffff; /* check the fill's ratio first */
--cy-text-link: #008489; /* 4.50:1 on white */
--cy-text-link-hover: #e11557; /* 4.72:1 on white */
/* #a3a3a3 measures 2.52:1 and misses the 3:1 minimum for non-text.
There is no token for it because nothing should use it. */
/* Surfaces --------------------------------------------------------------- */
--cy-surface-page: #ffffff;
--cy-surface-subtle: #fafafa;
--cy-surface-secondary: #edfafa; /* teal tint, marketplace cards */
--cy-surface-primary: #fff0f4; /* pink tint, use once if at all */
--cy-surface-sunken: #f5f5f5;
/* Borders ---------------------------------------------------------------- */
--cy-border-hairline: #f5f5f5; /* 1.10:1, decorative rules only */
--cy-border-subtle: #e5e5e5; /* 1.26:1, dividers and chips, never a control edge */
--cy-border-control: #737373; /* 4.74:1, the minimum for an input or control */
--cy-border-focus: #008489; /* 4.50:1 */
/* Status ----------------------------------------------------------------
Kept away from pink and teal, which already carry brand meaning. */
--cy-status-success: #15803d; /* 4.63:1 on white */
--cy-status-success-tint: #f0fdf4;
--cy-status-warning: #b45309; /* 4.62:1 on white, allergens and notices */
--cy-status-warning-tint: #fffbeb;
--cy-status-error: #b91c1c; /* 5.90:1 on white */
--cy-status-error-tint: #fef2f2;
--cy-status-info: #1d4ed8; /* 6.28:1 on white */
--cy-status-info-tint: #eff6ff;
--cy-status-disabled: #737373; /* 4.35:1 on the tint below. Inactive controls are
exempt from 1.4.3, and darkening it would weaken
the affordance. Do not reuse it on a tint for
anything that is not disabled. */
--cy-status-disabled-bg: #f5f5f5;
/* Type families ---------------------------------------------------------- */
--cy-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--cy-font-accent: 'Lora', Georgia, 'Times New Roman', serif;
--cy-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Weights. Nothing above 600, ever. */
--cy-weight-regular: 400; /* @kind font */
--cy-weight-medium: 500; /* @kind font */
--cy-weight-semibold: 600; /* @kind font */
/* Type scale, sized for a 390px phone first */
--cy-text-display: 40px;
--cy-text-h1: 28px;
--cy-text-h2: 22px;
--cy-text-h3: 18px;
--cy-text-lg: 17px;
--cy-text-base: 15px;
--cy-text-sm: 14px;
--cy-text-caption: 13px;
--cy-text-micro: 12px;
/* The size floor for white type on --cy-action-primary */
--cy-text-on-pink-min: 24px; /* @kind font */
--cy-text-on-pink-min-bold: 18.66px; /* @kind font */
/* Spacing, 4pt grid ------------------------------------------------------ */
--cy-space-1: 4px;
--cy-space-2: 8px;
--cy-space-3: 12px;
--cy-space-4: 16px;
--cy-space-5: 20px;
--cy-space-6: 24px;
--cy-space-8: 32px;
--cy-space-10: 40px;
--cy-space-12: 48px;
--cy-space-16: 64px;
--cy-space-20: 80px;
/* Radius ----------------------------------------------------------------- */
--cy-radius-sm: 6px;
--cy-radius-md: 8px; /* buttons and inputs */
--cy-radius-lg: 12px; /* cards and thumbnails */
--cy-radius-xl: 16px; /* sheets and modals */
--cy-radius-pill: 9999px;
/* Tap targets ------------------------------------------------------------ */
--cy-target-min: 24px; /* @kind spacing */ /* WCAG 2.2 AA floor */
--cy-target-comfort: 44px; /* @kind spacing */ /* the design default */
/* Elevation, flat by default -------------------------------------------- */
--cy-shadow-1: 0 1px 2px rgba(40, 40, 40, 0.04);
--cy-shadow-2: 0 2px 8px rgba(40, 40, 40, 0.06);
--cy-shadow-3: 0 6px 20px rgba(40, 40, 40, 0.08);
--cy-shadow-lift: 0 2px 16px rgba(40, 40, 40, 0.12);
--cy-ring-focus: 0 0 0 2px #ffffff, 0 0 0 4px #008489;
/* Motion ---------------------------------------------------------------- */
--cy-ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
--cy-duration-1: 120ms; /* @kind other */
--cy-duration-2: 200ms; /* @kind other */
--cy-duration-3: 320ms; /* @kind other */
}
/* ==========================================================================
Scoped base styles
Everything below sits under .cy-root. Nothing here can affect the host
application. Selectors are deliberately shallow so host rules written with
a class will still win where you want them to.
========================================================================== */
.cy-root {
font-family: var(--cy-font-ui);
font-size: var(--cy-text-base);
font-weight: var(--cy-weight-regular);
line-height: 1.5;
color: var(--cy-text-body);
background: var(--cy-surface-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-size-adjust: 100%;
}
.cy-root *,
.cy-root *::before,
.cy-root *::after {
box-sizing: border-box;
}
/* Headings. Inter, never above 600. */
.cy-root h1,
.cy-root .cy-h1 {
margin: 0;
font: var(--cy-weight-semibold) var(--cy-text-h1) / 1.25 var(--cy-font-ui);
letter-spacing: -0.01em;
color: var(--cy-text-heading);
}
.cy-root h2,
.cy-root .cy-h2 {
margin: 0;
font: var(--cy-weight-semibold) var(--cy-text-h2) / 1.3 var(--cy-font-ui);
letter-spacing: -0.005em;
color: var(--cy-text-heading);
}
.cy-root h3,
.cy-root .cy-h3 {
margin: 0;
font: var(--cy-weight-semibold) var(--cy-text-h3) / 1.35 var(--cy-font-ui);
color: var(--cy-text-heading);
}
.cy-root .cy-display {
font: var(--cy-weight-semibold) var(--cy-text-display) / 1.1 var(--cy-font-ui);
letter-spacing: -0.02em;
color: var(--cy-text-heading);
}
/* Lora. One phrase inside an Inter line, to warm it up. Not a headline face,
and never body copy. */
.cy-root .cy-accent {
font-family: var(--cy-font-accent);
font-weight: 400;
font-style: italic;
letter-spacing: 0;
color: inherit;
}
/* Body */
.cy-root p,
.cy-root .cy-p {
margin: 0;
font: var(--cy-weight-regular) var(--cy-text-base) / 1.55 var(--cy-font-ui);
color: var(--cy-text-body);
}
.cy-root .cy-text-lg { font-size: var(--cy-text-lg); line-height: 1.55; }
.cy-root .cy-text-sm { font-size: var(--cy-text-sm); line-height: 1.5; }
.cy-root .cy-caption {
font-size: var(--cy-text-caption);
line-height: 1.45;
color: var(--cy-text-muted);
}
.cy-root .cy-micro {
font-size: var(--cy-text-micro);
line-height: 1.4;
color: var(--cy-text-muted);
}
.cy-root .cy-strong { font-weight: var(--cy-weight-semibold); color: var(--cy-text-heading); }
.cy-root .cy-medium { font-weight: var(--cy-weight-medium); }
.cy-root .cy-muted { color: var(--cy-text-muted); }
/* Money columns and tables */
.cy-root .cy-tabular { font-variant-numeric: tabular-nums; }
.cy-root code,
.cy-root .cy-code {
font-family: var(--cy-font-mono);
font-size: 13px;
padding: 2px 6px;
border-radius: var(--cy-radius-sm);
background: var(--cy-surface-sunken);
color: var(--cy-text-heading);
}
.cy-root a {
color: var(--cy-text-link);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.cy-root a:hover { color: var(--cy-text-link-hover); }
.cy-root :focus-visible {
outline: none;
box-shadow: var(--cy-ring-focus);
border-radius: var(--cy-radius-sm);
}
/* Tap target floor. Apply to anything interactive that a finger has to find. */
.cy-root .cy-target {
min-width: var(--cy-target-comfort);
min-height: var(--cy-target-comfort);
}
/* --------------------------------------------------------------------------
Short aliases, kept alive while the older cards and kits are migrated.
Delete this block once nothing references them.
-------------------------------------------------------------------------- */
:root {
--cake-red: var(--cy-brand-primary);
--cake-red-hover: var(--cy-action-primary-hover);
--cake-red-soft: var(--cy-surface-primary);
--ink: var(--cy-brand-ink);
--ink-hover: #000000;
--fg-1: var(--cy-text-heading);
--fg-2: var(--cy-text-body);
--fg-3: var(--cy-text-muted);
--fg-4: #a3a3a3; /* 2.52:1, present only so old cards can label it as failing */
--surface-0: var(--cy-surface-page);
--surface-1: var(--cy-surface-subtle);
--surface-2: var(--cy-surface-sunken);
--surface-3: var(--cy-border-subtle);
--border-1: var(--cy-border-subtle);
--border-2: var(--cy-border-subtle);
--border-3: var(--cy-border-control);
--teal: var(--cy-brand-secondary);
--teal-soft: var(--cy-surface-secondary);
--teal-ink: #015b5f;
--amber: var(--cy-status-warning);
--amber-soft: var(--cy-status-warning-tint);
--amber-ink: #7c3a06;
--green: var(--cy-status-success);
--green-soft: var(--cy-status-success-tint);
--green-ink: #106030;
--error: var(--cy-status-error);
--error-soft: var(--cy-status-error-tint);
--error-ink: #8f1515;
--font-ui: var(--cy-font-ui);
--font-display: var(--cy-font-accent);
--font-mono: var(--cy-font-mono);
--w-regular: 400; /* @kind font */
--w-medium: 500; /* @kind font */
--w-semibold: 600; /* @kind font */
--t-display-xl: 56px;
--t-display-lg: 44px;
--t-display-md: 32px;
--t-h1: var(--cy-text-h1);
--t-h2: var(--cy-text-h2);
--t-h3: var(--cy-text-h3);
--t-body-lg: var(--cy-text-lg);
--t-body: var(--cy-text-base);
--t-body-sm: var(--cy-text-sm);
--t-caption: var(--cy-text-caption);
--t-micro: var(--cy-text-micro);
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
--sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
--sp-16: 64px; --sp-20: 80px;
--r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 9999px;
--shadow-1: var(--cy-shadow-1);
--shadow-2: var(--cy-shadow-2);
--shadow-3: var(--cy-shadow-3);
--shadow-card-hover: var(--cy-shadow-lift);
--ring-focus: var(--cy-ring-focus);
--ease-std: var(--cy-ease); /* @kind other */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-med: 200ms; /* @kind other */
--dur-slow: 320ms; /* @kind other */
}
/* --------------------------------------------------------------------------
Unscoped base styles for the preview cards in this project.
cakesify.css deliberately does not set these.
-------------------------------------------------------------------------- */
html,
body {
font-family: var(--cy-font-ui);
font-size: var(--cy-text-base);
font-weight: var(--cy-weight-regular);
line-height: 1.5;
color: var(--cy-text-body);
background: var(--cy-surface-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, .h1 { margin: 0; font: 600 var(--cy-text-h1) / 1.25 var(--cy-font-ui); letter-spacing: -0.01em; color: var(--cy-text-heading); }
h2, .h2 { margin: 0; font: 600 var(--cy-text-h2) / 1.3 var(--cy-font-ui); letter-spacing: -0.005em; color: var(--cy-text-heading); }
h3, .h3 { margin: 0; font: 600 var(--cy-text-h3) / 1.35 var(--cy-font-ui); color: var(--cy-text-heading); }
p, .p { margin: 0; font: 400 var(--cy-text-base) / 1.55 var(--cy-font-ui); color: var(--cy-text-body); }
.display { font: 600 var(--cy-text-display) / 1.1 var(--cy-font-ui); letter-spacing: -0.02em; color: var(--cy-text-heading); }
.accent { font-family: var(--cy-font-accent); font-weight: 400; font-style: italic; letter-spacing: 0; }
.body-lg { font-size: var(--cy-text-lg); line-height: 1.55; }
.body-sm { font-size: var(--cy-text-sm); line-height: 1.5; }
.caption { font-size: var(--cy-text-caption); line-height: 1.45; color: var(--cy-text-muted); }
.micro { font-size: var(--cy-text-micro); line-height: 1.4; color: var(--cy-text-muted); }
.strong { font-weight: 600; color: var(--cy-text-heading); }
.medium { font-weight: 500; }
.muted { color: var(--cy-text-muted); }
.tabular { font-variant-numeric: tabular-nums; }
code, .code {
font-family: var(--cy-font-mono);
font-size: 13px;
padding: 2px 6px;
border-radius: var(--cy-radius-sm);
background: var(--cy-surface-sunken);
color: var(--cy-text-heading);
}
a { color: var(--cy-text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--cy-text-link-hover); }
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
img{max-width:100%}
body{margin:0;background:#ffffff;color:#525252;font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5}
a{color:#008489}a:hover{color:#e11557}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #008489;outline-offset:2px}
h1,h2,h3{color:#282828;font-weight:600;margin:0;text-wrap:balance;letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty}
/* --------------------------------------------------------------------------
Page integration (was inline in the template head)
-------------------------------------------------------------------------- */
/* Mobile safety guard: ensure no horizontal overflow on small devices */
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
#sell-food-landing-page {
overflow-x: hidden !important;
width: 100% !important;
}
#sell-food-landing-page img {
max-width: 100% !important;
height: auto;
}
@media (max-width: 640px) {
#sell-food-landing-page {
padding-top: 36px !important;
}
#sell-food-landing-page h1 {
word-break: break-word;
}
#sell-food-landing-page section {
padding-inline: 16px !important;
}
}
/* --------------------------------------------------------------------------
What dc-runtime used to do in the browser, as plain CSS
-------------------------------------------------------------------------- */
/* The design runs at 90% on desktop. The export zoomed from a script,
which shrank the site header and footer too. */
@media not all and (max-width: 760px) {
#sell-food-landing-page .sfo-page {
zoom: 0.9;
}
}
/* Desktop only: the floating order cards in the hero and the dashed lines
between the steps. */
@media (max-width: 760px) {
#sell-food-landing-page .sfo-desktop-only {
display: none !important;
}
}
/* Hover, press and focus states. The elements carry inline styles, so these
need !important, the same way the export applied them. */
.sfo-cta:hover { background: #c30f49 !important; color: #ffffff !important; }
.sfo-press:active { transform: scale(0.98) !important; }
.sfo-outline:hover { background: #fafafa !important; color: #282828 !important; }
.sfo-lift:hover { box-shadow: 0 2px 16px rgba(40,40,40,0.12) !important; }
.sfo-help-link:hover { background: #fafafa !important; color: #e11557 !important; }
.sfo-field:hover { border-color: #282828 !important; }
.sfo-field:focus { border-color: #282828 !important; outline: 2px solid #008489 !important; outline-offset: 2px !important; }
/* Product chips in the calculator, from the design system Chip: a teal edge
and tint when selected; hover darkens the border, or deepens the tint. */
#sell-food-landing-page .sfo-chip {
font-family: var(--cy-font-ui, 'Inter', sans-serif);
font-weight: 400;
font-size: var(--cy-text-sm, 14px);
min-height: 36px;
padding: 0 14px;
border-radius: var(--cy-radius-pill, 9999px);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: border-color var(--cy-duration-1, 120ms) var(--cy-ease, ease), background var(--cy-duration-1, 120ms) var(--cy-ease, ease);
background: var(--cy-surface-page, #ffffff);
color: var(--cy-text-body, #525252);
border: 1px solid var(--cy-border-subtle, #e5e5e5);
}
#sell-food-landing-page .sfo-chip:hover {
background: var(--cy-surface-subtle, #fafafa);
border-color: var(--cy-border-control, #737373);
}
#sell-food-landing-page .sfo-chip[aria-pressed="true"] {
font-weight: 600;
background: var(--cy-surface-secondary, #edfafa);
color: var(--cy-action-secondary-active, #015b5f);
border-color: var(--cy-brand-secondary, #008489);
}
#sell-food-landing-page .sfo-chip[aria-pressed="true"]:hover {
background: #dcf4f4;
}