/* * storefront-theme.css: the rules every theme shares. * * It names no color, font, size or radius. Every declaration reads a custom * property the theme compiler printed into the page head, or an attribute it * put on . So there is one of these for every theme, it ships with the * app, and switching a theme changes none of it. * * Nothing here applies until a site has a theme: every selector hangs off * html[data-theme]. */ html[data-mode="dark"] { color-scheme: dark; } /* * A dark page, and the sections on it. * * The editor's runtime paints every section white and writes "dark text" as * black, and a page built in the editor has pictures and colors laid on it * that no rule here can see. Such a page cannot be turned dark from outside * and still be trusted to read. So on a dark theme a section is one of two * things. * * It follows the theme, and says so: `th-section` on the premade ones, * `th-follows` on the pages we ship. It sits on the dark page itself. * * Or it does not, and is left a light page: a band of paper. The compiler * prints the theme's colors the other way round for it (ThemeCompiler::PAPER), * so its ground is the theme's pale color and its ink the theme's dark, and * everything on it that reads a color token reads on paper. A section that * has a ground of the editor's own choosing (`is-bg-…`), or one written onto * it, keeps that ground: the words on it were chosen for it. * * Every rule here is for a dark page and no other. A light theme is not * touched by any of it. */ /* Its words take the paper's ink unless the section says what color its words are: a bar the shop made navy with white links keeps them white. So this one carries no weight at all. */ :where(html[data-mode="dark"] :is(.is-section, .is-wrapper > :not(:has(.th-follows, .th-section))):not(.th-section):not(.th-follows)) { color: var(--color-text); } html[data-mode="dark"] .is-section:not(.th-section):not(.th-follows):not([class*="is-bg-"]) { background-color: var(--color-neutral-primary); } /* What an older page keeps outside any section, straight inside the wrapper, unless it holds a section that follows. It has no ground of the runtime's to replace, so this carries no weight either: a ground of its own is kept. */ :where(html[data-mode="dark"] .is-wrapper > :not(.is-section):not(.th-section):not(.th-follows):not(:has(.th-follows, .th-section))) { background-color: var(--color-neutral-primary); } html[data-mode="dark"] .is-section.th-section:not(.th-invert), /* A section that follows the theme sits on the dark page, unless it names a ground of the theme's own (bg-brand-primary on a band): that one keeps it. */ html[data-mode="dark"] .is-section.th-follows:not([class*="bg-"]):not([data-mode="dark"]) { background-color: transparent; } /* * What the pages we ship still name outright. * * Most of what is on them reads a color token and follows the theme. Here and * there one says white, black or a gray by name instead: a filter drawer, a * skeleton, a hairline. On a light theme that is the look it always had. On a * dark one it is a white panel with the theme's pale words on it, which * cannot be read. So inside what follows the theme, and only on a dark page, * each of those names is given the token it stood in for: a pale ground * becomes one of the theme's surfaces, dark words become its inks, a gray * line becomes its line. Black grounds and white words are left alone: they * are scrims and the words over pictures. * * A band of paper is not touched: there the names mean what they say. Nor is * a color written onto the element itself, which is nearer than any rule. */ html[data-mode="dark"] .th-follows .bg-white { background-color: var(--color-neutral-primary); } html[data-mode="dark"] .th-follows :is(.bg-gray-50, .bg-gray-100, .bg-zinc-100, .hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-zinc-100:hover) { background-color: var(--color-neutral-secondary); } html[data-mode="dark"] .th-follows :is(.bg-gray-200, .bg-slate-200) { background-color: var(--color-neutral-tertiary); } html[data-mode="dark"] .th-follows :is(.text-black, .text-gray-900, .text-gray-800, .text-zinc-950, .text-zinc-900, .hover\:text-black:hover) { color: var(--color-heading); } html[data-mode="dark"] .th-follows :is(.text-gray-700, .text-gray-600, .text-zinc-600) { color: var(--color-text); } html[data-mode="dark"] .th-follows :is(.text-gray-500, .text-gray-400, .text-zinc-400, .hover\:text-gray-500:hover) { color: var(--color-textMuted); } html[data-mode="dark"] .th-follows :is(.border-gray-200, .border-gray-300, .border-zinc-200, .border-zinc-300) { border-color: var(--line-color); } html[data-mode="dark"] .th-follows :is(.border-black, .focus\:border-black:focus) { border-color: var(--color-inverse-primary); } html[data-mode="dark"] .th-follows .ring-gray-300 { --tw-ring-color: var(--line-color); } html[data-mode="dark"] .th-follows .is-card:not([style*="background"]) { background-color: var(--color-neutral-secondary); } /* * The editor's own designs keep a light and a dark mode of their own: a section says * data-mode, and its words, grounds, lines and buttons read --cb-mode-* (text-mode-muted, * bg-mode-surface). In a design that follows the theme, its light mode is the theme's page * and its dark mode a band on the theme's ink, on a light theme and a dark one alike. */ html[data-theme] .th-follows:not([data-mode="dark"]), html[data-theme] .th-follows [data-mode="light"] { --cb-mode-ink: var(--color-heading); --cb-mode-subtle: var(--color-text); --cb-mode-muted: var(--color-textMuted); --cb-mode-surface: var(--color-neutral-primary); --cb-mode-soft: var(--color-neutral-secondary); --cb-mode-line: var(--line-color); --cb-mode-line-strong: var(--color-inverse-primary); --cb-mode-button: var(--color-brand-primary); --cb-mode-button-on: var(--color-on-brand); --cb-mode-button-hover: color-mix(in srgb, var(--color-brand-primary) 85%, var(--color-inverse-primary)); --cb-mode-button-soft: var(--color-neutral-secondary); --cb-mode-button-soft-hover: var(--color-neutral-tertiary); } html[data-theme] .th-follows[data-mode="dark"], html[data-theme] .th-follows [data-mode="dark"] { --cb-mode-ink: var(--color-neutral-primary); --cb-mode-subtle: var(--color-neutral-secondary); --cb-mode-muted: color-mix(in srgb, var(--color-neutral-primary) 72%, var(--color-inverse-primary)); --cb-mode-surface: var(--color-inverse-primary); --cb-mode-soft: color-mix(in srgb, var(--color-inverse-primary) 90%, var(--color-neutral-primary)); --cb-mode-line: color-mix(in srgb, var(--color-neutral-primary) 22%, transparent); --cb-mode-line-strong: var(--color-neutral-secondary); --cb-mode-button: var(--color-neutral-primary); --cb-mode-button-on: var(--color-inverse-primary); --cb-mode-button-hover: var(--color-neutral-secondary); --cb-mode-button-soft: color-mix(in srgb, var(--color-inverse-primary) 80%, var(--color-neutral-primary)); --cb-mode-button-soft-hover: color-mix(in srgb, var(--color-inverse-primary) 70%, var(--color-neutral-primary)); } /* * A section that names one of the theme's grounds on itself (bg-brand-primary on a band) has it. * The editor's runtime paints every section white with `.is-wrapper div.is-section`, which a color * class alone does not outweigh: the band was white, and the words written for it could not be read. */ html[data-theme] div.is-section.bg-brand-primary { background-color: var(--color-brand-primary); } html[data-theme] div.is-section.bg-brand-secondary { background-color: var(--color-brand-secondary); } html[data-theme] div.is-section.bg-brand-tertiary { background-color: var(--color-brand-tertiary); } html[data-theme] div.is-section.bg-neutral-primary { background-color: var(--color-neutral-primary); } html[data-theme] div.is-section.bg-neutral-secondary { background-color: var(--color-neutral-secondary); } html[data-theme] div.is-section.bg-neutral-tertiary { background-color: var(--color-neutral-tertiary); } html[data-theme] div.is-section.bg-inverse-primary { background-color: var(--color-inverse-primary); } html[data-theme] div.is-section.bg-inverse-secondary { background-color: var(--color-inverse-secondary); } html[data-theme] div.is-section.bg-inverse-tertiary { background-color: var(--color-inverse-tertiary); } /* A section that follows the theme sits on its page on a light theme too, unless it names a ground of its own or is drawn in its dark mode. The runtime's white was a white band across a tinted page. */ html[data-theme] div.is-section.th-follows:not([class*="bg-"]):not([data-mode="dark"]) { background-color: transparent; } /* Words on a ground the theme's brand or accent color was given in a design: the words that read on it. */ /* Weighed with a section, as the dark page's renamed greys are (".text-black"), and written after them. */ html[data-theme] .is-section .th-on-brand { color: var(--color-on-brand); } html[data-theme] .is-section .th-on-accent { color: var(--color-on-accent); } /* A design's filled button painted the theme's brand color, whose words a class colored for its own. */ html[data-theme] .is-section .th-btn-on-brand { color: var(--color-on-brand); } /* The same names on the section itself. */ html[data-mode="dark"] .th-follows:is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-zinc-100) { background-color: var(--color-neutral-primary); } /* The editor's "dark text" writes every word black, for a light ground. On a dark page the ground a design that follows the theme is drawn on is dark, so its words are the theme's. */ html[data-mode="dark"] :is(.th-follows.is-dark-text, .th-follows .is-dark-text) :not(svg):not(path) { color: var(--color-text); } html[data-mode="dark"] :is(.th-follows.is-dark-text, .th-follows .is-dark-text) :is(h1, h2, h3, h4, h5, h6) { color: var(--color-heading); } html[data-theme] .ecommerce-body { background: var(--color-neutral-primary); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-base); line-height: var(--leading-base); } /* * Page content. Held at the vendor runtime's own specificity (0,1,1) with * :where(), and loaded after it, so the theme replaces the runtime's defaults * and everything a merchant chose still wins: a typography style on a section, * a class on the element, the shop's own CSS, light or dark text on a band. */ /* A heading's color yields to any class put on it, so it carries no weight at all. */ :where(html[data-theme] .is-container) :is(h1, h2, h3, h4, h5, h6) { color: var(--color-heading); } /* In a section an editor's design draws in its own dark mode, a heading is that section's ink. */ :where(html[data-theme] [data-mode="dark"]) :is(h1, h2, h3, h4, h5, h6) { color: var(--cb-mode-ink); } :where(html[data-theme]) .is-container :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); overflow-wrap: break-word; text-transform: var(--heading-case); text-wrap: balance; } :where(html[data-theme]) .is-container h1 { font-size: var(--text-h1); line-height: var(--leading-h1); margin: var(--space-h1) 0; } :where(html[data-theme]) .is-container h2 { font-size: var(--text-h2); line-height: var(--leading-h2); margin: var(--space-h2) 0; } :where(html[data-theme]) .is-container h3 { font-size: var(--text-h3); line-height: var(--leading-h3); margin: var(--space-h3) 0; } :where(html[data-theme]) .is-container h4 { font-size: var(--text-h4); line-height: var(--leading-h4); margin: var(--space-h4) 0; } :where(html[data-theme]) .is-container h5 { font-size: var(--text-h5); line-height: var(--leading-h5); margin: var(--space-h5) 0; } :where(html[data-theme]) .is-container h6 { font-size: var(--text-h6); line-height: var(--leading-h6); margin: var(--space-h6) 0; } :where(html[data-theme]) .is-container p { margin: var(--space-paragraph) 0; } /* * A page we ship (product, blog, event, membership) comes in a typography * style nobody chose: its sections say `type-poppins` or `type-opensans`, and * that style's sheet loads after this one. Under a theme the type on those * sections is the theme's. Each is found by a mark put beside the style in * our template, which names the style it sits next to, so a section whose * owner has since picked another style matches nothing here and keeps theirs. * One notch above the style's own rules and no more: a size or a weight set * on one heading in the editor still wins. */ html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-base); line-height: var(--leading-base); } html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); text-transform: var(--heading-case); } html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) h1 { font-size: var(--text-h1); line-height: var(--leading-h1); margin: var(--space-h1) 0; } html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) h2 { font-size: var(--text-h2); line-height: var(--leading-h2); margin: var(--space-h2) 0; } html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) h3 { font-size: var(--text-h3); line-height: var(--leading-h3); margin: var(--space-h3) 0; } html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) h4 { font-size: var(--text-h4); line-height: var(--leading-h4); margin: var(--space-h4) 0; } html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) h5 { font-size: var(--text-h5); line-height: var(--leading-h5); margin: var(--space-h5) 0; } html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) h6 { font-size: var(--text-h6); line-height: var(--leading-h6); margin: var(--space-h6) 0; } html[data-theme] :where(.is-section.th-type-poppins.type-poppins, .is-section.th-type-opensans.type-opensans) p { margin: var(--space-paragraph) 0; } /* * A design of the editor's taken onto the theme (adopt-theme.js) keeps the * font pairing it came with, and is marked beside it the way our own pages * are above. Under a theme the pairing's fonts give way to the theme's: the * section's heading and body fonts are the theme's again, which the design * reads as var(--font-heading) and var(--font-body). Its sizes and weights are * the design's. A pairing somebody picks for the section later matches * nothing here and is theirs. The theme's fonts are held under names of their * own at the root, where nothing has shadowed them yet. */ html[data-theme] { --th-font-heading: var(--font-heading); --th-font-body: var(--font-body); } html[data-theme] :where( .is-section.th-type-70s-revival.type-70s-revival, .is-section.th-type-abrilfatface-assistant.type-abrilfatface-assistant, .is-section.th-type-adventpro-opensans.type-adventpro-opensans, .is-section.th-type-alegreya-lato.type-alegreya-lato, .is-section.th-type-alegreyasanssc-hind.type-alegreyasanssc-hind, .is-section.th-type-alexbrush-ibmplexsans.type-alexbrush-ibmplexsans, .is-section.th-type-allan-overpassmono.type-allan-overpassmono, .is-section.th-type-amaticsc-josepfinsans.type-amaticsc-josepfinsans, .is-section.th-type-amaticsc-lato.type-amaticsc-lato, .is-section.th-type-analog-era.type-analog-era, .is-section.th-type-anonymouspro.type-anonymouspro, .is-section.th-type-anonymouspro-catamaran.type-anonymouspro-catamaran, .is-section.th-type-anticdidone-halant.type-anticdidone-halant, .is-section.th-type-architectural-studio.type-architectural-studio, .is-section.th-type-arimamadurai.type-arimamadurai, .is-section.th-type-art-deco-revival.type-art-deco-revival, .is-section.th-type-atma-tajawal.type-atma-tajawal, .is-section.th-type-avant-garde-magazine.type-avant-garde-magazine, .is-section.th-type-averialibre-barlow.type-averialibre-barlow, .is-section.th-type-badscript-rokkitt.type-badscript-rokkitt, .is-section.th-type-bilbo-halant.type-bilbo-halant, .is-section.th-type-blush-bloom.type-blush-bloom, .is-section.th-type-boogaloo-inconsolata.type-boogaloo-inconsolata, .is-section.th-type-botanical-garden.type-botanical-garden, .is-section.th-type-boutique-hotel.type-boutique-hotel, .is-section.th-type-brutalist-refined.type-brutalist-refined, .is-section.th-type-cabinsketch-montserrat.type-cabinsketch-montserrat, .is-section.th-type-candy-pop.type-candy-pop, .is-section.th-type-caveat-sourcecodepro.type-caveat-sourcecodepro, .is-section.th-type-cinzeldecor-palanquin.type-cinzeldecor-palanquin, .is-section.th-type-city-guide.type-city-guide, .is-section.th-type-classic-authority.type-classic-authority, .is-section.th-type-classic-editorial.type-classic-editorial, .is-section.th-type-classic-web.type-classic-web, .is-section.th-type-code-school.type-code-school, .is-section.th-type-contemporary-classic.type-contemporary-classic, .is-section.th-type-contemporary-editorial.type-contemporary-editorial, .is-section.th-type-cormorantsc-ibmplexsanscon.type-cormorantsc-ibmplexsanscon, .is-section.th-type-cornerstone.type-cornerstone, .is-section.th-type-corporate-modern.type-corporate-modern, .is-section.th-type-craft-market.type-craft-market, .is-section.th-type-cultural-heritage.type-cultural-heritage, .is-section.th-type-cutivemono-lato.type-cutivemono-lato, .is-section.th-type-dancingscript-anonymouspro.type-dancingscript-anonymouspro, .is-section.th-type-design-studio.type-design-studio, .is-section.th-type-dev-console.type-dev-console, .is-section.th-type-dev-journal.type-dev-journal, .is-section.th-type-dm-sans-pure.type-dm-sans-pure, .is-section.th-type-dosis-oldstandardtt.type-dosis-oldstandardtt, .is-section.th-type-dynalight-mada.type-dynalight-mada, .is-section.th-type-elegant-minimal.type-elegant-minimal, .is-section.th-type-elsie-frankruhllibre.type-elsie-frankruhllibre, .is-section.th-type-elsie-montserrat.type-elsie-montserrat, .is-section.th-type-engagement-spectral.type-engagement-spectral, .is-section.th-type-event-planner.type-event-planner, .is-section.th-type-federo-gothica1.type-federo-gothica1, .is-section.th-type-fjallaone-ibmplexserif.type-fjallaone-ibmplexserif, .is-section.th-type-forum-nanumgothiccoding.type-forum-nanumgothiccoding, .is-section.th-type-founder-mode.type-founder-mode, .is-section.th-type-frankruhllibre-lato.type-frankruhllibre-lato, .is-section.th-type-fugazone-librefranklin.type-fugazone-librefranklin, .is-section.th-type-gallery-modern.type-gallery-modern, .is-section.th-type-genz-bold.type-genz-bold, .is-section.th-type-grand-tour.type-grand-tour, .is-section.th-type-gravitasone-nanummyeongjo.type-gravitasone-nanummyeongjo, .is-section.th-type-greatvibes-robotomono.type-greatvibes-robotomono, .is-section.th-type-hammersmithone-poppins.type-hammersmithone-poppins, .is-section.th-type-heebo-ibmplexmono.type-heebo-ibmplexmono, .is-section.th-type-heebo-ibmplexmono-2.type-heebo-ibmplexmono-2, .is-section.th-type-ibmplexmono.type-ibmplexmono, .is-section.th-type-inconsolata.type-inconsolata, .is-section.th-type-inder-trirong.type-inder-trirong, .is-section.th-type-inter-clean.type-inter-clean, .is-section.th-type-italiana-martel.type-italiana-martel, .is-section.th-type-josefinsans-lekton.type-josefinsans-lekton, .is-section.th-type-josefinsans-neuton.type-josefinsans-neuton, .is-section.th-type-jost.type-jost, .is-section.th-type-julee-lora.type-julee-lora, .is-section.th-type-juliussansone-robotocondensed.type-juliussansone-robotocondensed, .is-section.th-type-juliussansone-taviraj.type-juliussansone-taviraj, .is-section.th-type-kalam-robotomono.type-kalam-robotomono, .is-section.th-type-kellyslab-yantramanav.type-kellyslab-yantramanav, .is-section.th-type-lato.type-lato, .is-section.th-type-launch-day.type-launch-day, .is-section.th-type-literary-journal.type-literary-journal, .is-section.th-type-londrinashadow-martel.type-londrinashadow-martel, .is-section.th-type-long-form.type-long-form, .is-section.th-type-luxury-fashion.type-luxury-fashion, .is-section.th-type-macondo-mukta.type-macondo-mukta, .is-section.th-type-marcellussc-heebo.type-marcellussc-heebo, .is-section.th-type-material-standard.type-material-standard, .is-section.th-type-merriweather.type-merriweather, .is-section.th-type-merriweathersans-martel.type-merriweathersans-martel, .is-section.th-type-modern-sans.type-modern-sans, .is-section.th-type-mono-technical.type-mono-technical, .is-section.th-type-montserrat-roboto.type-montserrat-roboto, .is-section.th-type-nanumgothiccod-firasanscon.type-nanumgothiccod-firasanscon, .is-section.th-type-neutral-workhorse.type-neutral-workhorse, .is-section.th-type-new-wave-editorial.type-new-wave-editorial, .is-section.th-type-nothingyouc-ibmplexmono.type-nothingyouc-ibmplexmono, .is-section.th-type-nothingyouc-ibmplexmono-2.type-nothingyouc-ibmplexmono-2, .is-section.th-type-novamono-robotomono.type-novamono-robotomono, .is-section.th-type-open-source.type-open-source, .is-section.th-type-opensans.type-opensans, .is-section.th-type-oranienbaum-sourcesanspro.type-oranienbaum-sourcesanspro, .is-section.th-type-oregano-zillaslab.type-oregano-zillaslab, .is-section.th-type-organic-artisan.type-organic-artisan, .is-section.th-type-oswald-biryani.type-oswald-biryani, .is-section.th-type-oswald-cousine.type-oswald-cousine, .is-section.th-type-oswald-opensans.type-oswald-opensans, .is-section.th-type-outfit-essential.type-outfit-essential, .is-section.th-type-pacifico-nanumgothiccod.type-pacifico-nanumgothiccod, .is-section.th-type-parisienne-maitree.type-parisienne-maitree, .is-section.th-type-passionone-worksans.type-passionone-worksans, .is-section.th-type-pathwaygothicone-merriweather.type-pathwaygothicone-merriweather, .is-section.th-type-pinyonscript-firasans.type-pinyonscript-firasans, .is-section.th-type-playfairdisp-petitformalscr.type-playfairdisp-petitformalscr, .is-section.th-type-poiretone-pridi.type-poiretone-pridi, .is-section.th-type-pollerone-ibmplexserif.type-pollerone-ibmplexserif, .is-section.th-type-poppins.type-poppins, .is-section.th-type-poppins-lekton.type-poppins-lekton, .is-section.th-type-poppins-oldstandardtt.type-poppins-oldstandardtt, .is-section.th-type-prata-hindsiliguri.type-prata-hindsiliguri, .is-section.th-type-ptserif-poppins.type-ptserif-poppins, .is-section.th-type-quicksand-kalam.type-quicksand-kalam, .is-section.th-type-raleway-lato.type-raleway-lato, .is-section.th-type-raleway-lusitana.type-raleway-lusitana, .is-section.th-type-raleway-neuton.type-raleway-neuton, .is-section.th-type-raleway-playfairdisplay.type-raleway-playfairdisplay, .is-section.th-type-rancho-robotoslab.type-rancho-robotoslab, .is-section.th-type-refined-minimalism.type-refined-minimalism, .is-section.th-type-retro-terminal.type-retro-terminal, .is-section.th-type-roboto.type-roboto, .is-section.th-type-rufina-oxygen.type-rufina-oxygen, .is-section.th-type-sacramento-opensans.type-sacramento-opensans, .is-section.th-type-sail-rasa.type-sail-rasa, .is-section.th-type-sairacon-thegirlnextdoor.type-sairacon-thegirlnextdoor, .is-section.th-type-satisfy-economica.type-satisfy-economica, .is-section.th-type-scandinavian-clean.type-scandinavian-clean, .is-section.th-type-sedgwickave-spectral.type-sedgwickave-spectral, .is-section.th-type-sharetechmono-nunito.type-sharetechmono-nunito, .is-section.th-type-sixcaps-robotomono.type-sixcaps-robotomono, .is-section.th-type-sourcecodepro-nunitosans.type-sourcecodepro-nunitosans, .is-section.th-type-sourcesanspro-anonymouspro.type-sourcesanspro-anonymouspro, .is-section.th-type-space-grotesk.type-space-grotesk, .is-section.th-type-spacemono.type-spacemono, .is-section.th-type-specialelite-encodesans.type-specialelite-encodesans, .is-section.th-type-specialelite-playfairdisplay.type-specialelite-playfairdisplay, .is-section.th-type-spectralsc-karma.type-spectralsc-karma, .is-section.th-type-spicy-kitchen.type-spicy-kitchen, .is-section.th-type-sriracha-arvo.type-sriracha-arvo, .is-section.th-type-startup-friendly.type-startup-friendly, .is-section.th-type-stintultracon-inconsolata.type-stintultracon-inconsolata, .is-section.th-type-swiss-modern.type-swiss-modern, .is-section.th-type-system-native.type-system-native, .is-section.th-type-system-ui.type-system-ui, .is-section.th-type-tangerine-opensans.type-tangerine-opensans, .is-section.th-type-tech-editorial.type-tech-editorial, .is-section.th-type-tech-editorial2.type-tech-editorial2, .is-section.th-type-teko-muktamahee.type-teko-muktamahee, .is-section.th-type-tenaram-overpassmono.type-tenaram-overpassmono, .is-section.th-type-thegirlnextdoor-sourcesanspro.type-thegirlnextdoor-sourcesanspro, .is-section.th-type-timeless-classic.type-timeless-classic, .is-section.th-type-trail-explorer.type-trail-explorer, .is-section.th-type-ubuntumono-sourcecodepro.type-ubuntumono-sourcecodepro, .is-section.th-type-unicaone-cormorantgaramond.type-unicaone-cormorantgaramond, .is-section.th-type-unicaone-sourcesanspro.type-unicaone-sourcesanspro, .is-section.th-type-voltaire-sourcecodepro.type-voltaire-sourcecodepro, .is-section.th-type-warm-humanist.type-warm-humanist, .is-section.th-type-yanonekaff-josefinsans.type-yanonekaff-josefinsans, .is-section.th-type-yantramanav-ibmplexserif.type-yantramanav-ibmplexserif, .is-section.th-type-yellowtail-frankruhllibre.type-yellowtail-frankruhllibre, .is-section.th-type-yeonsung-palanquin.type-yeonsung-palanquin, .is-section.th-type-yesevaone-forum.type-yesevaone-forum, .is-section.th-type-yesteryear-chivo.type-yesteryear-chivo ) { --font-heading: var(--th-font-heading); --font-body: var(--th-font-body); font-family: var(--th-font-body); } html[data-theme] :where( .is-section.th-type-70s-revival.type-70s-revival, .is-section.th-type-abrilfatface-assistant.type-abrilfatface-assistant, .is-section.th-type-adventpro-opensans.type-adventpro-opensans, .is-section.th-type-alegreya-lato.type-alegreya-lato, .is-section.th-type-alegreyasanssc-hind.type-alegreyasanssc-hind, .is-section.th-type-alexbrush-ibmplexsans.type-alexbrush-ibmplexsans, .is-section.th-type-allan-overpassmono.type-allan-overpassmono, .is-section.th-type-amaticsc-josepfinsans.type-amaticsc-josepfinsans, .is-section.th-type-amaticsc-lato.type-amaticsc-lato, .is-section.th-type-analog-era.type-analog-era, .is-section.th-type-anonymouspro.type-anonymouspro, .is-section.th-type-anonymouspro-catamaran.type-anonymouspro-catamaran, .is-section.th-type-anticdidone-halant.type-anticdidone-halant, .is-section.th-type-architectural-studio.type-architectural-studio, .is-section.th-type-arimamadurai.type-arimamadurai, .is-section.th-type-art-deco-revival.type-art-deco-revival, .is-section.th-type-atma-tajawal.type-atma-tajawal, .is-section.th-type-avant-garde-magazine.type-avant-garde-magazine, .is-section.th-type-averialibre-barlow.type-averialibre-barlow, .is-section.th-type-badscript-rokkitt.type-badscript-rokkitt, .is-section.th-type-bilbo-halant.type-bilbo-halant, .is-section.th-type-blush-bloom.type-blush-bloom, .is-section.th-type-boogaloo-inconsolata.type-boogaloo-inconsolata, .is-section.th-type-botanical-garden.type-botanical-garden, .is-section.th-type-boutique-hotel.type-boutique-hotel, .is-section.th-type-brutalist-refined.type-brutalist-refined, .is-section.th-type-cabinsketch-montserrat.type-cabinsketch-montserrat, .is-section.th-type-candy-pop.type-candy-pop, .is-section.th-type-caveat-sourcecodepro.type-caveat-sourcecodepro, .is-section.th-type-cinzeldecor-palanquin.type-cinzeldecor-palanquin, .is-section.th-type-city-guide.type-city-guide, .is-section.th-type-classic-authority.type-classic-authority, .is-section.th-type-classic-editorial.type-classic-editorial, .is-section.th-type-classic-web.type-classic-web, .is-section.th-type-code-school.type-code-school, .is-section.th-type-contemporary-classic.type-contemporary-classic, .is-section.th-type-contemporary-editorial.type-contemporary-editorial, .is-section.th-type-cormorantsc-ibmplexsanscon.type-cormorantsc-ibmplexsanscon, .is-section.th-type-cornerstone.type-cornerstone, .is-section.th-type-corporate-modern.type-corporate-modern, .is-section.th-type-craft-market.type-craft-market, .is-section.th-type-cultural-heritage.type-cultural-heritage, .is-section.th-type-cutivemono-lato.type-cutivemono-lato, .is-section.th-type-dancingscript-anonymouspro.type-dancingscript-anonymouspro, .is-section.th-type-design-studio.type-design-studio, .is-section.th-type-dev-console.type-dev-console, .is-section.th-type-dev-journal.type-dev-journal, .is-section.th-type-dm-sans-pure.type-dm-sans-pure, .is-section.th-type-dosis-oldstandardtt.type-dosis-oldstandardtt, .is-section.th-type-dynalight-mada.type-dynalight-mada, .is-section.th-type-elegant-minimal.type-elegant-minimal, .is-section.th-type-elsie-frankruhllibre.type-elsie-frankruhllibre, .is-section.th-type-elsie-montserrat.type-elsie-montserrat, .is-section.th-type-engagement-spectral.type-engagement-spectral, .is-section.th-type-event-planner.type-event-planner, .is-section.th-type-federo-gothica1.type-federo-gothica1, .is-section.th-type-fjallaone-ibmplexserif.type-fjallaone-ibmplexserif, .is-section.th-type-forum-nanumgothiccoding.type-forum-nanumgothiccoding, .is-section.th-type-founder-mode.type-founder-mode, .is-section.th-type-frankruhllibre-lato.type-frankruhllibre-lato, .is-section.th-type-fugazone-librefranklin.type-fugazone-librefranklin, .is-section.th-type-gallery-modern.type-gallery-modern, .is-section.th-type-genz-bold.type-genz-bold, .is-section.th-type-grand-tour.type-grand-tour, .is-section.th-type-gravitasone-nanummyeongjo.type-gravitasone-nanummyeongjo, .is-section.th-type-greatvibes-robotomono.type-greatvibes-robotomono, .is-section.th-type-hammersmithone-poppins.type-hammersmithone-poppins, .is-section.th-type-heebo-ibmplexmono.type-heebo-ibmplexmono, .is-section.th-type-heebo-ibmplexmono-2.type-heebo-ibmplexmono-2, .is-section.th-type-ibmplexmono.type-ibmplexmono, .is-section.th-type-inconsolata.type-inconsolata, .is-section.th-type-inder-trirong.type-inder-trirong, .is-section.th-type-inter-clean.type-inter-clean, .is-section.th-type-italiana-martel.type-italiana-martel, .is-section.th-type-josefinsans-lekton.type-josefinsans-lekton, .is-section.th-type-josefinsans-neuton.type-josefinsans-neuton, .is-section.th-type-jost.type-jost, .is-section.th-type-julee-lora.type-julee-lora, .is-section.th-type-juliussansone-robotocondensed.type-juliussansone-robotocondensed, .is-section.th-type-juliussansone-taviraj.type-juliussansone-taviraj, .is-section.th-type-kalam-robotomono.type-kalam-robotomono, .is-section.th-type-kellyslab-yantramanav.type-kellyslab-yantramanav, .is-section.th-type-lato.type-lato, .is-section.th-type-launch-day.type-launch-day, .is-section.th-type-literary-journal.type-literary-journal, .is-section.th-type-londrinashadow-martel.type-londrinashadow-martel, .is-section.th-type-long-form.type-long-form, .is-section.th-type-luxury-fashion.type-luxury-fashion, .is-section.th-type-macondo-mukta.type-macondo-mukta, .is-section.th-type-marcellussc-heebo.type-marcellussc-heebo, .is-section.th-type-material-standard.type-material-standard, .is-section.th-type-merriweather.type-merriweather, .is-section.th-type-merriweathersans-martel.type-merriweathersans-martel, .is-section.th-type-modern-sans.type-modern-sans, .is-section.th-type-mono-technical.type-mono-technical, .is-section.th-type-montserrat-roboto.type-montserrat-roboto, .is-section.th-type-nanumgothiccod-firasanscon.type-nanumgothiccod-firasanscon, .is-section.th-type-neutral-workhorse.type-neutral-workhorse, .is-section.th-type-new-wave-editorial.type-new-wave-editorial, .is-section.th-type-nothingyouc-ibmplexmono.type-nothingyouc-ibmplexmono, .is-section.th-type-nothingyouc-ibmplexmono-2.type-nothingyouc-ibmplexmono-2, .is-section.th-type-novamono-robotomono.type-novamono-robotomono, .is-section.th-type-open-source.type-open-source, .is-section.th-type-opensans.type-opensans, .is-section.th-type-oranienbaum-sourcesanspro.type-oranienbaum-sourcesanspro, .is-section.th-type-oregano-zillaslab.type-oregano-zillaslab, .is-section.th-type-organic-artisan.type-organic-artisan, .is-section.th-type-oswald-biryani.type-oswald-biryani, .is-section.th-type-oswald-cousine.type-oswald-cousine, .is-section.th-type-oswald-opensans.type-oswald-opensans, .is-section.th-type-outfit-essential.type-outfit-essential, .is-section.th-type-pacifico-nanumgothiccod.type-pacifico-nanumgothiccod, .is-section.th-type-parisienne-maitree.type-parisienne-maitree, .is-section.th-type-passionone-worksans.type-passionone-worksans, .is-section.th-type-pathwaygothicone-merriweather.type-pathwaygothicone-merriweather, .is-section.th-type-pinyonscript-firasans.type-pinyonscript-firasans, .is-section.th-type-playfairdisp-petitformalscr.type-playfairdisp-petitformalscr, .is-section.th-type-poiretone-pridi.type-poiretone-pridi, .is-section.th-type-pollerone-ibmplexserif.type-pollerone-ibmplexserif, .is-section.th-type-poppins.type-poppins, .is-section.th-type-poppins-lekton.type-poppins-lekton, .is-section.th-type-poppins-oldstandardtt.type-poppins-oldstandardtt, .is-section.th-type-prata-hindsiliguri.type-prata-hindsiliguri, .is-section.th-type-ptserif-poppins.type-ptserif-poppins, .is-section.th-type-quicksand-kalam.type-quicksand-kalam, .is-section.th-type-raleway-lato.type-raleway-lato, .is-section.th-type-raleway-lusitana.type-raleway-lusitana, .is-section.th-type-raleway-neuton.type-raleway-neuton, .is-section.th-type-raleway-playfairdisplay.type-raleway-playfairdisplay, .is-section.th-type-rancho-robotoslab.type-rancho-robotoslab, .is-section.th-type-refined-minimalism.type-refined-minimalism, .is-section.th-type-retro-terminal.type-retro-terminal, .is-section.th-type-roboto.type-roboto, .is-section.th-type-rufina-oxygen.type-rufina-oxygen, .is-section.th-type-sacramento-opensans.type-sacramento-opensans, .is-section.th-type-sail-rasa.type-sail-rasa, .is-section.th-type-sairacon-thegirlnextdoor.type-sairacon-thegirlnextdoor, .is-section.th-type-satisfy-economica.type-satisfy-economica, .is-section.th-type-scandinavian-clean.type-scandinavian-clean, .is-section.th-type-sedgwickave-spectral.type-sedgwickave-spectral, .is-section.th-type-sharetechmono-nunito.type-sharetechmono-nunito, .is-section.th-type-sixcaps-robotomono.type-sixcaps-robotomono, .is-section.th-type-sourcecodepro-nunitosans.type-sourcecodepro-nunitosans, .is-section.th-type-sourcesanspro-anonymouspro.type-sourcesanspro-anonymouspro, .is-section.th-type-space-grotesk.type-space-grotesk, .is-section.th-type-spacemono.type-spacemono, .is-section.th-type-specialelite-encodesans.type-specialelite-encodesans, .is-section.th-type-specialelite-playfairdisplay.type-specialelite-playfairdisplay, .is-section.th-type-spectralsc-karma.type-spectralsc-karma, .is-section.th-type-spicy-kitchen.type-spicy-kitchen, .is-section.th-type-sriracha-arvo.type-sriracha-arvo, .is-section.th-type-startup-friendly.type-startup-friendly, .is-section.th-type-stintultracon-inconsolata.type-stintultracon-inconsolata, .is-section.th-type-swiss-modern.type-swiss-modern, .is-section.th-type-system-native.type-system-native, .is-section.th-type-system-ui.type-system-ui, .is-section.th-type-tangerine-opensans.type-tangerine-opensans, .is-section.th-type-tech-editorial.type-tech-editorial, .is-section.th-type-tech-editorial2.type-tech-editorial2, .is-section.th-type-teko-muktamahee.type-teko-muktamahee, .is-section.th-type-tenaram-overpassmono.type-tenaram-overpassmono, .is-section.th-type-thegirlnextdoor-sourcesanspro.type-thegirlnextdoor-sourcesanspro, .is-section.th-type-timeless-classic.type-timeless-classic, .is-section.th-type-trail-explorer.type-trail-explorer, .is-section.th-type-ubuntumono-sourcecodepro.type-ubuntumono-sourcecodepro, .is-section.th-type-unicaone-cormorantgaramond.type-unicaone-cormorantgaramond, .is-section.th-type-unicaone-sourcesanspro.type-unicaone-sourcesanspro, .is-section.th-type-voltaire-sourcecodepro.type-voltaire-sourcecodepro, .is-section.th-type-warm-humanist.type-warm-humanist, .is-section.th-type-yanonekaff-josefinsans.type-yanonekaff-josefinsans, .is-section.th-type-yantramanav-ibmplexserif.type-yantramanav-ibmplexserif, .is-section.th-type-yellowtail-frankruhllibre.type-yellowtail-frankruhllibre, .is-section.th-type-yeonsung-palanquin.type-yeonsung-palanquin, .is-section.th-type-yesevaone-forum.type-yesevaone-forum, .is-section.th-type-yesteryear-chivo.type-yesteryear-chivo ) :is(h1, h2, h3, h4, h5, h6) { font-family: var(--th-font-heading); } /* The pairing sheets set a display heading by its own rule (.type-x .display h1), which the one above, weighing nothing so a class on a heading wins, does not outweigh. */ html[data-theme] :where( .is-section.th-type-70s-revival.type-70s-revival, .is-section.th-type-abrilfatface-assistant.type-abrilfatface-assistant, .is-section.th-type-adventpro-opensans.type-adventpro-opensans, .is-section.th-type-alegreya-lato.type-alegreya-lato, .is-section.th-type-alegreyasanssc-hind.type-alegreyasanssc-hind, .is-section.th-type-alexbrush-ibmplexsans.type-alexbrush-ibmplexsans, .is-section.th-type-allan-overpassmono.type-allan-overpassmono, .is-section.th-type-amaticsc-josepfinsans.type-amaticsc-josepfinsans, .is-section.th-type-amaticsc-lato.type-amaticsc-lato, .is-section.th-type-analog-era.type-analog-era, .is-section.th-type-anonymouspro.type-anonymouspro, .is-section.th-type-anonymouspro-catamaran.type-anonymouspro-catamaran, .is-section.th-type-anticdidone-halant.type-anticdidone-halant, .is-section.th-type-architectural-studio.type-architectural-studio, .is-section.th-type-arimamadurai.type-arimamadurai, .is-section.th-type-art-deco-revival.type-art-deco-revival, .is-section.th-type-atma-tajawal.type-atma-tajawal, .is-section.th-type-avant-garde-magazine.type-avant-garde-magazine, .is-section.th-type-averialibre-barlow.type-averialibre-barlow, .is-section.th-type-badscript-rokkitt.type-badscript-rokkitt, .is-section.th-type-bilbo-halant.type-bilbo-halant, .is-section.th-type-blush-bloom.type-blush-bloom, .is-section.th-type-boogaloo-inconsolata.type-boogaloo-inconsolata, .is-section.th-type-botanical-garden.type-botanical-garden, .is-section.th-type-boutique-hotel.type-boutique-hotel, .is-section.th-type-brutalist-refined.type-brutalist-refined, .is-section.th-type-cabinsketch-montserrat.type-cabinsketch-montserrat, .is-section.th-type-candy-pop.type-candy-pop, .is-section.th-type-caveat-sourcecodepro.type-caveat-sourcecodepro, .is-section.th-type-cinzeldecor-palanquin.type-cinzeldecor-palanquin, .is-section.th-type-city-guide.type-city-guide, .is-section.th-type-classic-authority.type-classic-authority, .is-section.th-type-classic-editorial.type-classic-editorial, .is-section.th-type-classic-web.type-classic-web, .is-section.th-type-code-school.type-code-school, .is-section.th-type-contemporary-classic.type-contemporary-classic, .is-section.th-type-contemporary-editorial.type-contemporary-editorial, .is-section.th-type-cormorantsc-ibmplexsanscon.type-cormorantsc-ibmplexsanscon, .is-section.th-type-cornerstone.type-cornerstone, .is-section.th-type-corporate-modern.type-corporate-modern, .is-section.th-type-craft-market.type-craft-market, .is-section.th-type-cultural-heritage.type-cultural-heritage, .is-section.th-type-cutivemono-lato.type-cutivemono-lato, .is-section.th-type-dancingscript-anonymouspro.type-dancingscript-anonymouspro, .is-section.th-type-design-studio.type-design-studio, .is-section.th-type-dev-console.type-dev-console, .is-section.th-type-dev-journal.type-dev-journal, .is-section.th-type-dm-sans-pure.type-dm-sans-pure, .is-section.th-type-dosis-oldstandardtt.type-dosis-oldstandardtt, .is-section.th-type-dynalight-mada.type-dynalight-mada, .is-section.th-type-elegant-minimal.type-elegant-minimal, .is-section.th-type-elsie-frankruhllibre.type-elsie-frankruhllibre, .is-section.th-type-elsie-montserrat.type-elsie-montserrat, .is-section.th-type-engagement-spectral.type-engagement-spectral, .is-section.th-type-event-planner.type-event-planner, .is-section.th-type-federo-gothica1.type-federo-gothica1, .is-section.th-type-fjallaone-ibmplexserif.type-fjallaone-ibmplexserif, .is-section.th-type-forum-nanumgothiccoding.type-forum-nanumgothiccoding, .is-section.th-type-founder-mode.type-founder-mode, .is-section.th-type-frankruhllibre-lato.type-frankruhllibre-lato, .is-section.th-type-fugazone-librefranklin.type-fugazone-librefranklin, .is-section.th-type-gallery-modern.type-gallery-modern, .is-section.th-type-genz-bold.type-genz-bold, .is-section.th-type-grand-tour.type-grand-tour, .is-section.th-type-gravitasone-nanummyeongjo.type-gravitasone-nanummyeongjo, .is-section.th-type-greatvibes-robotomono.type-greatvibes-robotomono, .is-section.th-type-hammersmithone-poppins.type-hammersmithone-poppins, .is-section.th-type-heebo-ibmplexmono.type-heebo-ibmplexmono, .is-section.th-type-heebo-ibmplexmono-2.type-heebo-ibmplexmono-2, .is-section.th-type-ibmplexmono.type-ibmplexmono, .is-section.th-type-inconsolata.type-inconsolata, .is-section.th-type-inder-trirong.type-inder-trirong, .is-section.th-type-inter-clean.type-inter-clean, .is-section.th-type-italiana-martel.type-italiana-martel, .is-section.th-type-josefinsans-lekton.type-josefinsans-lekton, .is-section.th-type-josefinsans-neuton.type-josefinsans-neuton, .is-section.th-type-jost.type-jost, .is-section.th-type-julee-lora.type-julee-lora, .is-section.th-type-juliussansone-robotocondensed.type-juliussansone-robotocondensed, .is-section.th-type-juliussansone-taviraj.type-juliussansone-taviraj, .is-section.th-type-kalam-robotomono.type-kalam-robotomono, .is-section.th-type-kellyslab-yantramanav.type-kellyslab-yantramanav, .is-section.th-type-lato.type-lato, .is-section.th-type-launch-day.type-launch-day, .is-section.th-type-literary-journal.type-literary-journal, .is-section.th-type-londrinashadow-martel.type-londrinashadow-martel, .is-section.th-type-long-form.type-long-form, .is-section.th-type-luxury-fashion.type-luxury-fashion, .is-section.th-type-macondo-mukta.type-macondo-mukta, .is-section.th-type-marcellussc-heebo.type-marcellussc-heebo, .is-section.th-type-material-standard.type-material-standard, .is-section.th-type-merriweather.type-merriweather, .is-section.th-type-merriweathersans-martel.type-merriweathersans-martel, .is-section.th-type-modern-sans.type-modern-sans, .is-section.th-type-mono-technical.type-mono-technical, .is-section.th-type-montserrat-roboto.type-montserrat-roboto, .is-section.th-type-nanumgothiccod-firasanscon.type-nanumgothiccod-firasanscon, .is-section.th-type-neutral-workhorse.type-neutral-workhorse, .is-section.th-type-new-wave-editorial.type-new-wave-editorial, .is-section.th-type-nothingyouc-ibmplexmono.type-nothingyouc-ibmplexmono, .is-section.th-type-nothingyouc-ibmplexmono-2.type-nothingyouc-ibmplexmono-2, .is-section.th-type-novamono-robotomono.type-novamono-robotomono, .is-section.th-type-open-source.type-open-source, .is-section.th-type-opensans.type-opensans, .is-section.th-type-oranienbaum-sourcesanspro.type-oranienbaum-sourcesanspro, .is-section.th-type-oregano-zillaslab.type-oregano-zillaslab, .is-section.th-type-organic-artisan.type-organic-artisan, .is-section.th-type-oswald-biryani.type-oswald-biryani, .is-section.th-type-oswald-cousine.type-oswald-cousine, .is-section.th-type-oswald-opensans.type-oswald-opensans, .is-section.th-type-outfit-essential.type-outfit-essential, .is-section.th-type-pacifico-nanumgothiccod.type-pacifico-nanumgothiccod, .is-section.th-type-parisienne-maitree.type-parisienne-maitree, .is-section.th-type-passionone-worksans.type-passionone-worksans, .is-section.th-type-pathwaygothicone-merriweather.type-pathwaygothicone-merriweather, .is-section.th-type-pinyonscript-firasans.type-pinyonscript-firasans, .is-section.th-type-playfairdisp-petitformalscr.type-playfairdisp-petitformalscr, .is-section.th-type-poiretone-pridi.type-poiretone-pridi, .is-section.th-type-pollerone-ibmplexserif.type-pollerone-ibmplexserif, .is-section.th-type-poppins.type-poppins, .is-section.th-type-poppins-lekton.type-poppins-lekton, .is-section.th-type-poppins-oldstandardtt.type-poppins-oldstandardtt, .is-section.th-type-prata-hindsiliguri.type-prata-hindsiliguri, .is-section.th-type-ptserif-poppins.type-ptserif-poppins, .is-section.th-type-quicksand-kalam.type-quicksand-kalam, .is-section.th-type-raleway-lato.type-raleway-lato, .is-section.th-type-raleway-lusitana.type-raleway-lusitana, .is-section.th-type-raleway-neuton.type-raleway-neuton, .is-section.th-type-raleway-playfairdisplay.type-raleway-playfairdisplay, .is-section.th-type-rancho-robotoslab.type-rancho-robotoslab, .is-section.th-type-refined-minimalism.type-refined-minimalism, .is-section.th-type-retro-terminal.type-retro-terminal, .is-section.th-type-roboto.type-roboto, .is-section.th-type-rufina-oxygen.type-rufina-oxygen, .is-section.th-type-sacramento-opensans.type-sacramento-opensans, .is-section.th-type-sail-rasa.type-sail-rasa, .is-section.th-type-sairacon-thegirlnextdoor.type-sairacon-thegirlnextdoor, .is-section.th-type-satisfy-economica.type-satisfy-economica, .is-section.th-type-scandinavian-clean.type-scandinavian-clean, .is-section.th-type-sedgwickave-spectral.type-sedgwickave-spectral, .is-section.th-type-sharetechmono-nunito.type-sharetechmono-nunito, .is-section.th-type-sixcaps-robotomono.type-sixcaps-robotomono, .is-section.th-type-sourcecodepro-nunitosans.type-sourcecodepro-nunitosans, .is-section.th-type-sourcesanspro-anonymouspro.type-sourcesanspro-anonymouspro, .is-section.th-type-space-grotesk.type-space-grotesk, .is-section.th-type-spacemono.type-spacemono, .is-section.th-type-specialelite-encodesans.type-specialelite-encodesans, .is-section.th-type-specialelite-playfairdisplay.type-specialelite-playfairdisplay, .is-section.th-type-spectralsc-karma.type-spectralsc-karma, .is-section.th-type-spicy-kitchen.type-spicy-kitchen, .is-section.th-type-sriracha-arvo.type-sriracha-arvo, .is-section.th-type-startup-friendly.type-startup-friendly, .is-section.th-type-stintultracon-inconsolata.type-stintultracon-inconsolata, .is-section.th-type-swiss-modern.type-swiss-modern, .is-section.th-type-system-native.type-system-native, .is-section.th-type-system-ui.type-system-ui, .is-section.th-type-tangerine-opensans.type-tangerine-opensans, .is-section.th-type-tech-editorial.type-tech-editorial, .is-section.th-type-tech-editorial2.type-tech-editorial2, .is-section.th-type-teko-muktamahee.type-teko-muktamahee, .is-section.th-type-tenaram-overpassmono.type-tenaram-overpassmono, .is-section.th-type-thegirlnextdoor-sourcesanspro.type-thegirlnextdoor-sourcesanspro, .is-section.th-type-timeless-classic.type-timeless-classic, .is-section.th-type-trail-explorer.type-trail-explorer, .is-section.th-type-ubuntumono-sourcecodepro.type-ubuntumono-sourcecodepro, .is-section.th-type-unicaone-cormorantgaramond.type-unicaone-cormorantgaramond, .is-section.th-type-unicaone-sourcesanspro.type-unicaone-sourcesanspro, .is-section.th-type-voltaire-sourcecodepro.type-voltaire-sourcecodepro, .is-section.th-type-warm-humanist.type-warm-humanist, .is-section.th-type-yanonekaff-josefinsans.type-yanonekaff-josefinsans, .is-section.th-type-yantramanav-ibmplexserif.type-yantramanav-ibmplexserif, .is-section.th-type-yellowtail-frankruhllibre.type-yellowtail-frankruhllibre, .is-section.th-type-yeonsung-palanquin.type-yeonsung-palanquin, .is-section.th-type-yesevaone-forum.type-yesevaone-forum, .is-section.th-type-yesteryear-chivo.type-yesteryear-chivo ) .display h1 { font-family: var(--th-font-heading); } /* * A button of a design taken onto the theme. Its colors are the theme's * already, written on it with its own behind them; here it takes the theme's * button type, and the theme's corners for as long as it wears the corner it * came with (`data-th-corner`). Corners picked for it in the editor are a * class of their own, which matches nothing here. */ html[data-theme] .th-btn-look { font-family: var(--btn-font); letter-spacing: var(--btn-tracking); text-transform: var(--btn-case); } html[data-theme] :is( .th-btn-look[data-th-corner=""]:not([class*="rounded"]), .th-btn-look[data-th-corner="rounded"].rounded, .th-btn-look[data-th-corner="rounded-none"].rounded-none, .th-btn-look[data-th-corner="rounded-sm"].rounded-sm, .th-btn-look[data-th-corner="rounded-md"].rounded-md, .th-btn-look[data-th-corner="rounded-lg"].rounded-lg, .th-btn-look[data-th-corner="rounded-xl"].rounded-xl, .th-btn-look[data-th-corner="rounded-2xl"].rounded-2xl, .th-btn-look[data-th-corner="rounded-3xl"].rounded-3xl, .th-btn-look[data-th-corner="rounded-full"].rounded-full ) { border-radius: var(--radius-button); } /* A section that asks for the theme's rhythm. The vendor's 30px is (0,2,0). */ html[data-theme] .th-section > .is-container { max-width: var(--container); padding: var(--space-section) var(--gutter); } @media (min-width: 768px) { html[data-theme] .th-section > .is-container { padding-block: var(--space-section-md); } } @media (min-width: 1024px) { html[data-theme] .th-section > .is-container { padding-block: var(--space-section-lg); } } /* Two ways a section departs from that rhythm: closer together, or edge to edge. */ html[data-theme] .th-section.th-tight > .is-container { padding-block: calc(var(--space-section) * 0.45); } html[data-theme] .th-section.th-bleed > .is-container { max-width: none; padding: 0; } /* The ways a section is changed from the builder's toolbar, each a class of the theme's so the next theme restyles it. */ html[data-theme] .th-section.th-roomy > .is-container { padding-block: calc(var(--space-section) * 1.5); } html[data-theme] .th-section.th-divided { border-top: var(--line-width) solid var(--line-color); } html[data-theme] .th-section.th-pattern { background-image: radial-gradient(color-mix(in srgb, var(--color-inverse-primary) 12%, transparent) 1.2px, transparent 1.4px); background-size: 22px 22px; } @media (min-width: 1024px) { html[data-theme] .th-section.th-roomy > .is-container { padding-block: calc(var(--space-section-lg) * 1.4); } } /* Rises into view as it is scrolled to, where the browser can tie a motion to scrolling; still everywhere else. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { html[data-theme] .th-section.th-rise > .is-container { animation: th-rise linear both; animation-range: entry 0% entry 60%; animation-timeline: view(); } } } @keyframes th-rise { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } } html[data-theme] .th-heading { text-align: var(--heading-align); } /* One word of a heading, marked in the accent. */ html[data-theme] .th-mark { background: var(--color-brand-tertiary); color: var(--color-on-accent); display: inline-block; line-height: 1; padding: 0 0.12em; } /* A strip that runs. It holds the same line twice, so the loop has no seam. */ html[data-theme] .th-marquee { display: flex; overflow: hidden; } html[data-theme] .th-marquee > * { flex: none; } @media (prefers-reduced-motion: no-preference) { html[data-theme] .th-marquee > * { animation: th-slide 36s linear infinite; } } @keyframes th-slide { to { transform: translateX(-100%); } } /* Small print that labels things. */ html[data-theme] .th-label { font-family: var(--label-font); font-size: var(--text-label); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); line-height: 1.4; text-transform: var(--label-case); } /* Buttons. */ html[data-theme] .th-btn { align-items: center; background: var(--color-brand-primary); border: var(--line-width) solid var(--color-brand-primary); border-radius: var(--radius-button); color: var(--color-on-brand); cursor: pointer; display: inline-flex; font-family: var(--btn-font); font-size: 0.9375rem; font-weight: var(--btn-weight); gap: 0.5em; justify-content: center; letter-spacing: var(--btn-tracking); line-height: 1.2; padding: var(--btn-py) var(--btn-px); text-decoration: none; text-transform: var(--btn-case); transition: background-color var(--motion-duration) var(--motion-easing), color var(--motion-duration) var(--motion-easing), opacity var(--motion-duration) var(--motion-easing), transform var(--motion-duration) var(--motion-easing), box-shadow var(--motion-duration) var(--motion-easing); } html[data-theme] .th-btn--accent { background: var(--color-brand-tertiary); border-color: var(--color-brand-tertiary); color: var(--color-on-accent); } html[data-theme] .th-btn--quiet { background: transparent; border-color: var(--line-color); color: var(--color-inverse-primary); } html[data-btn="outline"] .th-btn:not(.th-btn--accent) { background: transparent; border-color: var(--color-inverse-primary); color: var(--color-inverse-primary); } /* Where the main button is an outline, the quiet one steps back to underlined text. */ html[data-btn="outline"] .th-btn.th-btn--quiet { border-color: transparent; padding-inline: 0.25rem; text-decoration: underline; text-underline-offset: 0.35em; } html[data-line="ink"] .th-btn { border-color: var(--color-inverse-primary); } /* * Add one, where it is listed: a dish on a menu, a product in a row. The button is * the theme's own, smaller, and never under 44px to the touch. Once something is * added it gives way to a count with one fewer and one more. */ html[data-theme] .th-btn--sm { font-size: 0.8125rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0.5rem 1rem; } html[data-theme] .th-btn--lg { font-size: 1.0625rem; padding: calc(var(--btn-py) * 1.3) calc(var(--btn-px) * 1.3); } html[data-theme] .th-btn--pill { border-radius: 9999px; } html[data-theme] .th-stepper { align-items: center; border: var(--line-width) solid var(--line-color); border-radius: var(--radius-button); display: inline-flex; min-height: 2.75rem; } html[data-theme] .th-stepper > button { appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 1.125rem; line-height: 1; min-height: 2.75rem; min-width: 2.75rem; } html[data-theme] .th-stepper > output { font-family: var(--btn-font); font-weight: var(--btn-weight); min-width: 1.5em; text-align: center; } html[data-line="ink"] .th-stepper { border-color: var(--color-inverse-primary); } /* * What has been added so far, and the way to it. It stays at the foot of the * screen while the list it counts is on the screen, and is hidden while the * list is not (dynamic-cart.js). Fixed rather than sticky: every section of a * page clips its overflow, and a sticky bar inside one stays at the end of * its list, a long way down, instead of in view. */ html[data-theme] .th-orderbar { align-items: center; border-radius: var(--radius-lg); bottom: var(--gutter); box-shadow: var(--shadow-overlay); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; left: var(--gutter); margin: 0 auto; max-width: var(--container); padding: 0.75rem 0.75rem 0.75rem 1.25rem; position: fixed; right: var(--gutter); z-index: 30; } html[data-theme] .th-orderbar[hidden] { display: none; } html[data-hover="fade"] .th-btn:hover { opacity: 0.72; } html[data-hover="lift"] .th-btn:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); } html[data-hover="press"] .th-btn:hover { box-shadow: var(--shadow-raised); transform: translate(-2px, -2px); } html[data-hover="press"] .th-btn:active { box-shadow: none; transform: translate(2px, 2px); } html[data-hover="invert"] .th-btn:hover { background: var(--color-inverse-primary); border-color: var(--color-inverse-primary); color: var(--color-neutral-primary); } html[data-btn="outline"][data-hover="fade"] .th-btn:not(.th-btn--accent):not(.th-btn--quiet):hover { background: var(--color-inverse-primary); color: var(--color-neutral-primary); opacity: 1; } /* Cards: products, posts, categories. */ html[data-theme] .th-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); } @media (min-width: 768px) { html[data-theme] .th-grid { grid-template-columns: repeat(var(--grid-cols-md), minmax(0, 1fr)); } } @media (min-width: 1024px) { html[data-theme] .th-grid { grid-template-columns: repeat(var(--grid-cols-lg), minmax(0, 1fr)); } } /* * A row of cards, not a catalog: it holds up to six and shows as many as the * theme puts in one row, so the row never ends short and never leaves one card * alone on a second line. Two to a row shows four, and so does a phone. */ @media (max-width: 767px) { html[data-theme] .th-grid--row > :nth-child(n + 5) { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { html[data-cols-md="2"] .th-grid--row > :nth-child(n + 5), html[data-cols-md="3"] .th-grid--row > :nth-child(n + 4), html[data-cols-md="4"] .th-grid--row > :nth-child(n + 5) { display: none; } } @media (min-width: 1024px) { html[data-cols-lg="2"] .th-grid--row > :nth-child(n + 5), html[data-cols-lg="3"] .th-grid--row > :nth-child(n + 4), html[data-cols-lg="4"] .th-grid--row > :nth-child(n + 5), html[data-cols-lg="5"] .th-grid--row > :nth-child(n + 6) { display: none; } } /* * Nothing to list yet: a row with no products, a page with no posts, an empty * cart. One block for all of them, so every theme has it. `.dyn-empty` is the * line the builder's dynamic sections already write when nothing matches, and * it takes the same look. */ html[data-theme] :is(.th-empty, .dyn-empty) { border: var(--line-width) dashed var(--line-color); border-radius: var(--radius-lg); color: var(--color-textMuted); font-size: var(--text-base); grid-column: 1 / -1; opacity: 1; padding: calc(var(--gap) * 1.25) var(--gap); text-align: var(--heading-align); } html[data-theme] .th-empty > * { margin: 0; } html[data-theme] .th-empty > * + * { margin-top: 0.5rem; } html[data-theme] .th-empty > .th-btn { margin-top: 1rem; } html[data-theme] .th-empty__title { color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); line-height: var(--leading-h5); text-transform: var(--heading-case); } /* * The builder's live-data sections: a row of products, posts, events, members. * * A section whose owner chose "Theme" for its layout writes no layout of its * own (it would be nearer than this sheet), and takes the theme's items per * row, gap and picture shape here. The section's own sheet counts columns at * 640px; a theme counts them at 768px, as the shop grid does, so the count is * set outright. */ html[data-theme] .dyn-section--layout-theme { --dyn-cols: var(--grid-cols); --dyn-gap-set: var(--gap); --dyn-ratio: var(--card-ratio); /* One record at length: its name the size of the headings written around it. */ --dyn-spotlight-title: var(--text-h3); --dyn-spotlight-title-sm: var(--text-h4); } @media (min-width: 768px) { html[data-theme] .dyn-section--layout-theme { --dyn-cols: var(--grid-cols-md); } } @media (min-width: 1024px) { html[data-theme] .dyn-section--layout-theme { --dyn-cols: var(--grid-cols-lg); } } /* * Its button and its price are the theme's, at the size the section gives * them. Held to the weight of two classes with :where(): over the section's * own plain rule, level with the rules it writes for one layout (the white * button on a picture stays white, because those come later), and under the * CSS a shop writes for the section, which is confined to it and comes later * still. */ :where(html[data-theme]) .dyn-section .dyn-part--button { background: var(--color-brand-primary); border-color: var(--color-brand-primary); border-width: var(--line-width); color: var(--color-on-brand); font-family: var(--btn-font); font-weight: var(--btn-weight); letter-spacing: var(--btn-tracking); text-transform: var(--btn-case); } :where(html[data-btn="outline"]) .dyn-section .dyn-part--button { background: transparent; border-color: var(--color-inverse-primary); color: var(--color-inverse-primary); } :where(html[data-theme]) .dyn-section .dyn-part--price { color: var(--color-inverse-primary); font-family: var(--font-accent); } /* * A record's name is a heading in the page's outline and a card's title to the * eye. Left to the rule for headings above it would be set at the theme's h3, * with an h3's space around it, on every card of a row. It is a card title * here: in the theme's heading face, as the titles of the cards written around * it on a page are, at the theme's smallest heading size and with none of a * heading's space. Where one record is shown at length, its name is the * heading it looks like. */ :where(html[data-theme]) .dyn-section .dyn-part--heading { color: var(--color-inverse-primary); font-family: var(--font-heading); font-size: var(--text-h6); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); line-height: var(--leading-h6); margin: 0; text-transform: var(--heading-case); } :where(html[data-theme]) .dyn-section--spotlight .dyn-part--heading { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); text-transform: var(--heading-case); } /* * The rest of a card in the theme's hand, so a live section reads as one of * the page's own: the ground a missing picture is drawn on, the words in the * theme's text colors (which turn over in a band on the ink), the small print * (what kind, when, where, how many) in its label style, and its badges, links * and chips. Two classes, as above. */ :where(html[data-theme]) .dyn-section .dyn-part--placeholder { background: var(--color-neutral-secondary); color: var(--color-inverse-tertiary); opacity: 1; } :where(html[data-theme]) .dyn-section .dyn-part--text, :where(html[data-theme]) .dyn-section .dyn-part--excerpt { color: var(--color-inverse-secondary); opacity: 1; } :where(html[data-theme]) .dyn-section .dyn-field--category, :where(html[data-theme]) .dyn-section .dyn-field--count, :where(html[data-theme]) .dyn-section .dyn-field--date_read, :where(html[data-theme]) .dyn-section .dyn-field--goal, :where(html[data-theme]) .dyn-section .dyn-field--time_venue { color: var(--color-inverse-tertiary); font-family: var(--label-font); font-size: var(--text-label); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); line-height: 1.4; text-transform: var(--label-case); } :where(html[data-theme]) .dyn-section .dyn-part--badge { background: var(--color-brand-secondary); border: var(--line-width) solid transparent; border-radius: var(--radius-badge); color: var(--color-brand-primary); font-family: var(--label-font); font-size: var(--text-label); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); line-height: 1.4; padding: 0.25em 0.75em; text-transform: var(--label-case); } :where(html[data-badge="solid"]) .dyn-section .dyn-part--badge { background: var(--color-brand-tertiary); border-color: var(--line-color); color: var(--color-on-accent); } :where(html[data-badge="outline"]) .dyn-section .dyn-part--badge { background: var(--color-neutral-primary); border-color: var(--line-color); color: var(--color-inverse-secondary); } :where(html[data-theme]) .dyn-section .dyn-part--link { color: var(--color-inverse-primary); font-family: var(--label-font); font-size: var(--text-label); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-decoration-thickness: var(--line-width); text-transform: var(--label-case); text-underline-offset: 0.25em; } :where(html[data-link="underline"]) .dyn-section .dyn-part--link { text-decoration-line: underline; } /* A chip is the theme's chip. The section's own chip rule weighs two classes, so this weighs one more. */ html[data-theme] .dyn-section--chips .th-chip { border: var(--line-width) solid var(--line-color); border-radius: var(--radius-button); color: var(--color-inverse-primary); font-family: var(--font-body); font-weight: 400; letter-spacing: normal; text-transform: none; } html[data-theme] .dyn-section--chips .th-chip--on { background: var(--color-inverse-primary); border-color: var(--color-inverse-primary); color: var(--color-neutral-primary); } /* A month over its events, and a day in its block, are headings of the page. */ :where(html[data-theme]) .dyn-section .dyn-group__heading { color: var(--color-inverse-primary); font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); opacity: 1; text-transform: var(--heading-case); } :where(html[data-theme]) .dyn-section .dyn-group__rule { background: var(--line-color); opacity: 1; } :where(html[data-theme]) .dyn-section .dyn-datestack__day { font-family: var(--font-heading); font-weight: var(--heading-weight); } /* * How a section that follows the theme sets out its records, matched to the * cards written around it on a page. * * Products and services in a list, a menu, a donation and the events in an * agenda are ruled rows, as a menu board or a price list is written: the name * and its small print on the left, the price and the button on the right, two * columns of them on a wide screen once there are four or more. Posts in a list * are an index: the date in a column of its own, the title and its summary * beside it. A card in a grid or a row of products is the theme's card, filled * or framed as its own are. Memberships are framed as the theme frames things. * * Only a section set to follow the theme is laid out here, and every starter's * is. The parts are placed at the weight of two classes, as above; the rows and * the columns weigh one more, to stand over the section's own layout. */ html[data-theme] .dyn-section--layout-theme:is(.dyn-section--list, .dyn-section--agenda) .dyn-item { align-items: center; border-bottom: var(--line-width) solid var(--line-color); padding: 0.875rem 0; } html[data-theme] .dyn-section--layout-theme:is(.dyn-section--list, .dyn-section--agenda) .dyn-items { column-gap: calc(var(--gap) * 2); row-gap: 0; } /* A list opens on a rule. An agenda's month heading draws its own. */ html[data-theme] .dyn-section--layout-theme.dyn-section--list .dyn-items { border-top: var(--line-width) solid var(--line-color); } @media (min-width: 768px) { html[data-theme] .dyn-section--layout-theme.dyn-section--products.dyn-section--list .dyn-items:has(> .dyn-item:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } :where(html[data-theme]) :is(.dyn-section--list, .dyn-section--agenda):where(.dyn-section--layout-theme):where(.dyn-section--products, .dyn-section--events) .dyn-item__body { align-items: baseline; column-gap: 1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.25rem; } :where(html[data-theme]) :is(.dyn-section--list, .dyn-section--agenda):where(.dyn-section--layout-theme):where(.dyn-section--products, .dyn-section--events) .dyn-part--heading { grid-column: 1; font-size: var(--text-h6); } :where(html[data-theme]) :is(.dyn-section--list, .dyn-section--agenda):where(.dyn-section--layout-theme):where(.dyn-section--products, .dyn-section--events) .dyn-part--text { grid-column: 1; } :where(html[data-theme]) :is(.dyn-section--list, .dyn-section--agenda):where(.dyn-section--layout-theme):where(.dyn-section--products, .dyn-section--events) .dyn-part--price { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; } :where(html[data-theme]) :is(.dyn-section--list, .dyn-section--agenda):where(.dyn-section--layout-theme):where(.dyn-section--products, .dyn-section--events) .dyn-part--button, :where(html[data-theme]) :is(.dyn-section--list, .dyn-section--agenda):where(.dyn-section--layout-theme):where(.dyn-section--products, .dyn-section--events) .dyn-part--link { grid-column: 2; grid-row: 2; justify-self: end; } :where(html[data-theme]) .dyn-section--list:where(.dyn-section--layout-theme.dyn-section--blog) .dyn-item__body { column-gap: calc(var(--gap) * 2); display: grid; grid-template-areas: "date title" "date excerpt"; grid-template-columns: 12.5rem minmax(0, 1fr); row-gap: 0.375rem; } :where(html[data-theme]) .dyn-section--list:where(.dyn-section--layout-theme.dyn-section--blog) .dyn-part--heading { grid-area: title; font-size: var(--text-h5); line-height: var(--leading-h5); } :where(html[data-theme]) .dyn-section--list:where(.dyn-section--layout-theme.dyn-section--blog) .dyn-part--text { grid-area: date; padding-top: 0.35em; } :where(html[data-theme]) .dyn-section--list:where(.dyn-section--layout-theme.dyn-section--blog) .dyn-part--excerpt { grid-area: excerpt; } @media (max-width: 640px) { :where(html[data-theme]) .dyn-section--list:where(.dyn-section--layout-theme.dyn-section--blog) .dyn-item__body { grid-template-areas: "date" "title" "excerpt"; grid-template-columns: minmax(0, 1fr); } } /* Three posts side by side: the title a size up, as a story's is. */ :where(html[data-theme]) .dyn-section--grid:where(.dyn-section--layout-theme.dyn-section--blog) .dyn-part--heading { font-size: var(--text-h5); line-height: var(--leading-h5); } /* Products in a grid or a row are the theme's card, filled or framed as its own cards are. */ html[data-card="filled"] .dyn-section--layout-theme.dyn-section--products:is(.dyn-section--grid, .dyn-section--carousel) .dyn-item { background: var(--color-neutral-secondary); border-radius: var(--radius-md); padding: 0.75rem; } html[data-card="outlined"] .dyn-section--layout-theme.dyn-section--products:is(.dyn-section--grid, .dyn-section--carousel) .dyn-item { border: var(--line-width) solid var(--line-color); border-radius: var(--radius-md); overflow: hidden; } html[data-card="outlined"] .dyn-section--layout-theme.dyn-section--products:is(.dyn-section--grid, .dyn-section--carousel) .dyn-item__body { padding: 0 0.875rem 0.875rem; } :where(html[data-card="outlined"]) :is(.dyn-section--grid, .dyn-section--carousel):where(.dyn-section--layout-theme.dyn-section--products) .dyn-part--media { border-radius: 0; } /* Memberships, framed as the theme frames things: the name a heading, the price the theme's price. */ html[data-theme] .dyn-section--layout-theme.dyn-section--treat-outline .dyn-item { border: var(--line-width) solid var(--line-color); border-radius: var(--radius-lg); padding: calc(var(--gap) * 1.25); } :where(html[data-theme]) .dyn-section--grid:where(.dyn-section--layout-theme.dyn-section--memberships) .dyn-part--heading { font-size: var(--text-h4); line-height: var(--leading-h4); min-height: 0; max-height: none; } :where(html[data-theme]) .dyn-section--grid:where(.dyn-section--layout-theme.dyn-section--memberships) .dyn-part--text { color: var(--color-inverse-primary); font-family: var(--font-accent); font-size: var(--text-h6); } :where(html[data-theme]) .dyn-section--grid:where(.dyn-section--layout-theme.dyn-section--memberships) .dyn-part--link { margin-top: auto; } /* * Categories with no picture are blocks of the brand's three colors, edge to * edge, as a starter writes them: the name a heading at the foot of each, the * count and the way in under it, in the color that reads on that block. */ html[data-theme] .dyn-section--layout-theme.dyn-section--categories .dyn-items:not(:has(.dyn-part--media)) { gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } html[data-theme] .dyn-section--layout-theme.dyn-section--categories .dyn-item:not(:has(> .dyn-part--media)) { background: var(--color-brand-primary); color: var(--color-on-brand); justify-content: flex-end; min-height: clamp(11rem, 22vw, 19rem); padding: calc(var(--gap) * 1.5); } html[data-theme] .dyn-section--layout-theme.dyn-section--categories .dyn-item:not(:has(> .dyn-part--media)):nth-child(3n + 2) { background: var(--color-brand-secondary); color: var(--color-inverse-primary); } html[data-theme] .dyn-section--layout-theme.dyn-section--categories .dyn-item:not(:has(> .dyn-part--media)):nth-child(3n) { background: var(--color-brand-tertiary); color: var(--color-on-accent); } :where(html[data-theme]) .dyn-section--grid:where(.dyn-section--layout-theme.dyn-section--categories) .dyn-part--heading { font-size: var(--text-h5); line-height: var(--leading-h5); } :where(html[data-theme]) .dyn-section--grid:where(.dyn-section--layout-theme.dyn-section--categories) :where(.dyn-item:not(:has(> .dyn-part--media))) .dyn-part--heading { color: inherit; font-size: var(--text-h3); line-height: var(--leading-h3); min-height: 0; max-height: none; } :where(html[data-theme]) .dyn-section--grid:where(.dyn-section--layout-theme.dyn-section--categories) :where(.dyn-item:not(:has(> .dyn-part--media))) .dyn-part--text, :where(html[data-theme]) .dyn-section--grid:where(.dyn-section--layout-theme.dyn-section--categories) :where(.dyn-item:not(:has(> .dyn-part--media))) .dyn-part--link { color: inherit; } html[data-theme] .th-card { position: relative; border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: flex; flex-direction: column; text-align: var(--card-align); transition: box-shadow var(--motion-duration) var(--motion-easing), transform var(--motion-duration) var(--motion-easing); } html[data-theme] .th-card__media { aspect-ratio: var(--card-ratio); background: var(--color-neutral-secondary); border-radius: var(--radius-image); overflow: hidden; position: relative; } html[data-theme] .th-card__media > * { transition: transform calc(var(--motion-duration) * 2) var(--motion-easing); } html[data-theme] .th-card__body { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.875rem; } html[data-theme] .th-card__title { color: var(--color-inverse-primary); font-weight: 500; line-height: 1.3; } html[data-theme] .th-card__price { color: var(--color-inverse-primary); font-family: var(--font-accent); } html[data-theme] .th-card__flag { left: 0.75rem; position: absolute; top: 0.75rem; z-index: 1; } html[data-card="filled"] .th-card { background: var(--color-neutral-secondary); padding: 0.75rem; } /* On the alternate background a filled card would vanish, so there it takes the page's. */ html[data-card="filled"] .bg-neutral-secondary .th-card { background: var(--color-neutral-primary); } html[data-card="outlined"] .th-card { background: var(--color-neutral-primary); border: var(--line-width) solid var(--line-color); overflow: hidden; } html[data-card="outlined"] .th-card__media { border-bottom: var(--line-width) solid var(--line-color); border-radius: 0; } html[data-card="outlined"] .th-card__body { padding: 0.875rem; } html[data-card-hover="zoom"] .th-card:hover .th-card__media > * { transform: scale(1.05); } html[data-card-hover="lift"] .th-card:hover { box-shadow: var(--shadow-raised); transform: translate(-3px, -3px); } /* Badges. */ html[data-theme] .th-badge { border: var(--line-width) solid transparent; border-radius: var(--radius-badge); display: inline-block; font-family: var(--label-font); font-size: var(--text-label); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); line-height: 1.4; padding: 0.25em 0.75em; text-transform: var(--label-case); } html[data-badge="soft"] .th-badge { background: var(--color-brand-secondary); color: var(--color-brand-primary); } html[data-badge="solid"] .th-badge { background: var(--color-brand-tertiary); border-color: var(--line-color); color: var(--color-on-accent); } html[data-badge="outline"] .th-badge { background: transparent; border-color: var(--line-color); color: var(--color-inverse-secondary); } /* Fields. */ html[data-theme] .th-input { background: var(--color-neutral-primary); border: var(--line-width) solid var(--line-color); border-radius: var(--radius-input); color: var(--color-inverse-primary); font: inherit; min-width: 0; padding: var(--btn-py) 1rem; transition: border-color var(--motion-duration) var(--motion-easing); } html[data-theme] .th-input::placeholder { color: var(--color-inverse-tertiary); opacity: 1; } html[data-theme] .th-input:focus-visible { border-color: var(--color-inverse-primary); outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } html[data-input="underlined"] .th-input { background: transparent; border-color: transparent transparent var(--color-inverse-primary); border-radius: 0; padding-inline: 0; } html[data-input="filled"] .th-input { background: var(--color-neutral-secondary); border-color: transparent; } /* Links in running text. */ html[data-theme] .th-link { color: inherit; text-decoration-thickness: var(--line-width); text-underline-offset: 0.25em; } html[data-link="none"] .th-link { text-decoration: none; } html[data-link="underline"] .th-link { text-decoration-line: underline; } html[data-link="underline-on-hover"] .th-link { text-decoration-line: none; } html[data-link="underline-on-hover"] .th-link:hover { text-decoration-line: underline; } /* What the store's own screens are made of: a choice, a status, a panel that opens over the page. */ html[data-theme] .th-chip { border: var(--line-width) solid var(--line-color); border-radius: var(--radius-button); display: inline-block; font-size: 0.875rem; line-height: 1.2; padding: 0.5rem 0.9rem; } html[data-theme] .th-chip--on { background: var(--color-inverse-primary); border-color: var(--color-inverse-primary); color: var(--color-neutral-primary); } html[data-theme] .th-link--on { font-weight: 600; text-decoration-line: underline; } html[data-theme] .th-panel { box-shadow: var(--shadow-overlay); } html[data-theme] .th-secure { background: var(--color-neutral-primary); border-radius: var(--radius-input); } html[data-theme] .th-status { border-radius: var(--radius-badge); display: inline-block; font-family: var(--label-font); font-size: var(--text-label); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); line-height: 1.4; padding: 0.25em 0.75em; text-transform: var(--label-case); } html[data-theme] .th-status--success { background: var(--color-success-secondary); color: var(--color-success-primary); } html[data-theme] .th-status--info { background: var(--color-info-secondary); color: var(--color-info-primary); } html[data-theme] .th-status--warning { background: var(--color-warning-secondary); color: var(--color-warning-primary); } html[data-theme] .th-status--error { background: var(--color-error-secondary); color: var(--color-error-primary); } /* * Forms a shop builds in the form builder. * * The form builder draws every form from its own values (formbuilderai.css:335-384), and a form * that has none of its own gets stock ones: a white ground, a system font, a blue. Here each is * pointed at the theme instead. They are set on every section, not on the page, so that a form on * a dark band reads the band's colors. A form whose owner chose a color keeps it: the form builder * writes that onto the form itself, which is nearer than this. */ html[data-theme] .is-section, html[data-theme] .th-invert, html[data-theme] .th-footer { --form-background-color: transparent; --form-font-family: var(--font-body); --form-text-color: var(--color-text); --form-font-size: var(--text-base); --form-primary-color: var(--color-brand-primary); --form-primary-border-width: var(--line-width); --form-primary-rounded: var(--radius-input); --form-label-color: var(--color-inverse-primary); --form-info-color: var(--color-textMuted); --form-input-background-color: var(--color-neutral-primary); --form-input-text-color: var(--color-inverse-primary); --form-input-placeholder-color: var(--color-inverse-tertiary); --form-input-border-color: var(--line-color); --form-choice-border-color: var(--line-color); --form-switch-background-color: var(--color-neutral-tertiary); --form-switch-knob-color: var(--color-neutral-primary); --form-dropfile-border-color: var(--line-color); --form-title-color: var(--color-heading); --form-title-font-size: var(--text-h4); --form-title-font-weight: var(--heading-weight); --form-desc-color: var(--color-text); --form-button-background-color: var(--color-brand-primary); --form-button-hover-background-color: var(--color-inverse-primary); --form-button-text-color: var(--color-on-brand); --form-button-hover-text-color: var(--color-neutral-primary); --form-button-border-color: var(--color-brand-primary); --form-reset-background-color: transparent; --form-reset-text-color: var(--color-inverse-primary); --form-reset-border-color: var(--line-color); } /* Where the brand color is too near the ink to be seen on it, a button on a dark band takes the band's own ink. */ html[data-brand="ink"] .th-invert, html[data-brand="ink"][data-footer="dark"] .th-footer { --form-button-background-color: var(--color-inverse-primary); --form-button-border-color: var(--color-inverse-primary); --form-button-text-color: var(--color-neutral-primary); --form-button-hover-background-color: var(--color-brand-tertiary); --form-button-hover-text-color: var(--color-on-accent); } html[data-brand="ink"] .th-invert .th-btn:not(.th-btn--accent, .th-btn--quiet) { background: var(--color-inverse-primary); border-color: var(--color-inverse-primary); color: var(--color-neutral-primary); } /* What the form builder has no value for: the theme's heading face, button recipe and field recipe. */ html[data-theme] form[id^="form_"] .form-title { font-family: var(--font-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-case); } html[data-theme] form[id^="form_"] label:not(:has(input)), html[data-theme] form[id^="form_"] legend { font-family: var(--label-font); letter-spacing: var(--label-tracking); text-transform: var(--label-case); } html[data-theme] form[id^="form_"] button { border-radius: var(--radius-button); font-family: var(--btn-font); font-weight: var(--btn-weight); letter-spacing: var(--btn-tracking); padding: var(--btn-py) var(--btn-px); text-transform: var(--btn-case); transition: background-color var(--motion-duration) var(--motion-easing), color var(--motion-duration) var(--motion-easing); } html[data-input="underlined"] form[id^="form_"] :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { background: transparent; border-color: transparent transparent var(--form-input-text-color); border-radius: 0; padding-inline: 0; } html[data-input="filled"] form[id^="form_"] :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { background: var(--color-neutral-secondary); border-color: transparent; } /* * Two values the form viewer writes onto the form itself when the form has none of its own: a * stock blue for what is focused or chosen, and a stock gray around a file drop * (formviewer.esm.js, setTheme). Written there they are nearer than the block above, so a form * with no look of its own was that blue under every theme. They are known by the stock value * sitting in the form's own style, and only then replaced: a form whose owner chose a color * carries that color there instead, and keeps it. */ html[data-theme] form[id^="form_"][style*="--form-primary-color: #3b82f6"], html[data-theme] form[id^="form_"][style*="--form-primary-color:#3b82f6"] { --form-primary-color: var(--color-brand-primary) !important; } html[data-theme] form[id^="form_"][style*="--form-dropfile-border-color: rgb(194 194 194)"], html[data-theme] form[id^="form_"][style*="--form-dropfile-border-color:rgb(194 194 194)"] { --form-dropfile-border-color: var(--line-color) !important; } html[data-theme] form[id^="form_"] :is(input, select, textarea):focus-visible { outline: 2px solid var(--form-primary-color); outline-offset: 2px; } html[data-theme] form[id^="form_"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--form-primary-color); } /* Rules and frames. */ html[data-theme] .th-rule { border: 0; border-top: var(--line-width) solid var(--line-color); margin: 0; } html[data-theme] .th-frame { border: var(--line-width) solid var(--line-color); border-radius: var(--radius-lg); } /* A band on the ink. The compiler prints the swapped colors for this scope. */ html[data-theme] .th-invert { background: var(--color-neutral-primary); color: var(--color-text); } /* The footer's tone. */ html[data-theme] .th-footer { color: var(--color-text); } html[data-footer="light"] .th-footer { background: var(--color-neutral-secondary); } html[data-footer="dark"] .th-footer { background: var(--color-neutral-primary); } html[data-footer="brand"] .th-footer { background: var(--color-brand-primary); } /* Arrival on scroll. The resting state is the visible one. */ @media (prefers-reduced-motion: no-preference) { html[data-reveal="fade"] .th-arrive { animation: th-fade calc(var(--motion-duration) * 2.5) var(--motion-easing) both; } html[data-reveal="rise"] .th-arrive { animation: th-rise calc(var(--motion-duration) * 2.5) var(--motion-easing) both; } } @keyframes th-fade { from { opacity: 0; } } @keyframes th-rise { from { opacity: 0; transform: translateY(16px); } } @media (prefers-reduced-motion: reduce) { html[data-theme] * { transition-duration: 0.01ms !important; } }