/* * Storefront theme styles cut from theme/*.html. * * The source pages carried this block inline in every . It is identical * across them apart from the badge rotation that only the About page used, so * both live here and every page loads one file. */ @import url('https://fonts.googleapis.com/css2?family=Phudu:wght@400;500;600;700;800;900&display=swap'); /* * The Gilroy family, self-hosted. * * The source theme declared only six normal faces, so `italic` and `font-black` * were being faked by the browser: a slanted Medium instead of Medium Italic, and * a smeared XBold instead of the 900 cut. Each weight below is the OS/2 * usWeightClass read out of the file itself — in this family "Black" is 1000 and * "Heavy" is 900, so Tailwind's font-black (900) resolves to Heavy. * * Weights 100 (Thin), 200 (Xlight) and 1000 (Black) exist in theme/ but no rule * on the storefront asks for them, so they are not shipped. */ @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Light.otf') format('opentype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Light Italic.otf') format('opentype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Regular.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Italic.otf') format('opentype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Medium.otf') format('opentype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Medium Italic.otf') format('opentype'); font-weight: 500; font-style: italic; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy SemiBold Italic.otf') format('opentype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Bold.otf') format('opentype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Bold Italic.otf') format('opentype'); font-weight: 700; font-style: italic; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy XBold.otf') format('opentype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy XBold Italic.otf') format('opentype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Heavy.otf') format('opentype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/gilroy/SVN-Gilroy Heavy Italic.otf') format('opentype'); font-weight: 900; font-style: italic; } html { font-size: 17px; } body { font-family: 'SVN-Gilroy', sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.6; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Phudu', cursive, sans-serif; } @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .animate-marquee { display: inline-flex; animation: marquee 35s linear infinite; } .animate-marquee:hover { animation-play-state: paused; } @keyframes rotateBadge { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: rotateBadge 12s linear infinite; } /* * Article body typography. * * A post stores one HTML blob, so the per-element Tailwind classes the source * article page wrote by hand cannot be applied to it. These rules reproduce the * same look for content coming out of the editor, scoped to .client-article so * nothing else on the storefront is affected. */ .client-article > * + * { margin-top: 1.25rem; } .client-article h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; color: #111827; margin-top: 2rem; } .client-article h3 { font-size: 1.25rem; font-weight: 700; color: #111827; margin-top: 1.75rem; } .client-article h4 { font-size: 1.125rem; font-weight: 700; color: #111827; margin-top: 1.5rem; } @media (min-width: 768px) { .client-article h2 { font-size: 1.875rem; } } .client-article ul, .client-article ol { padding-left: 1.5rem; color: #374151; } .client-article ul { list-style: disc; } .client-article ol { list-style: decimal; } .client-article li + li { margin-top: 0.5rem; } .client-article a { color: #f04c36; text-decoration: underline; } .client-article blockquote { background: #111827; color: #fff; padding: 2rem; border-radius: 1rem; border-left: 8px solid #f04c36; font-weight: 500; font-style: italic; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); } .client-article img { max-width: 100%; height: auto; border-radius: 1rem; } .client-article table { width: 100%; border-collapse: collapse; } .client-article th, .client-article td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: left; } /* * Storefront navigation from the Menu admin, styled to match the theme. * * The markup is client/partials/navigation-branch (shared with /api/public/menus * through MenuService), and storefront.css already gives it working hover * submenus. These rules only restate the theme's own typography and red hover so * a configured menu looks like the one the design shipped with. */ .client-theme-nav .client-nav-list { gap: 2rem; } .client-theme-nav .client-nav-item > a, .client-theme-nav .client-nav-item > span { padding: 1rem 0; border-radius: 0; background: none; color: #111827; font-weight: 700; font-size: .875rem; text-transform: uppercase; position: relative; } .client-theme-nav .client-nav-item > span { color: #6b7280; } .client-theme-nav .client-nav-item > a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #f04c36; transition: width .3s ease; } .client-theme-nav .client-nav-item > a:hover { background: none; color: #f04c36; } .client-theme-nav .client-nav-item > a:hover::after { width: 100%; } /* Submenu panel: theme radius and shadow, geometry from storefront.css. */ .client-theme-nav .client-nav-list .client-nav-list { gap: 0; padding: .5rem; border-radius: .5rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); } .client-theme-nav .client-nav-list .client-nav-list .client-nav-item > a, .client-theme-nav .client-nav-list .client-nav-list .client-nav-item > span { padding: .5rem .75rem; font-size: .8125rem; text-transform: none; } .client-theme-nav .client-nav-list .client-nav-list .client-nav-item > a::after { display: none; } /* The same menu inside the mobile drawer: one stacked, divided list. */ .client-theme-drawer-nav .client-nav-list { flex-direction: column; gap: 0; } .client-theme-drawer-nav .client-nav-item > a, .client-theme-drawer-nav .client-nav-item > span { display: block; padding: 1rem 1.5rem; border-radius: 0; border-bottom: 1px solid #f3f4f6; background: none; color: #111827; font-weight: 700; font-size: .875rem; text-transform: uppercase; } .client-theme-drawer-nav .client-nav-item > a:hover { background: #f9fafb; color: #f04c36; } .client-theme-drawer-nav .client-nav-list .client-nav-list { display: flex; position: static; border: 0; box-shadow: none; padding: 0; } .client-theme-drawer-nav .client-nav-list .client-nav-list .client-nav-item > a, .client-theme-drawer-nav .client-nav-list .client-nav-list .client-nav-item > span { padding-left: 2.5rem; text-transform: none; font-weight: 600; } /* The same menu partial in the footer's quick-links column. */ .client-theme-footer-nav .client-nav-list { flex-direction: column; gap: .75rem; } .client-theme-footer-nav .client-nav-item > a, .client-theme-footer-nav .client-nav-item > span { padding: 0; border-radius: 0; background: none; color: #9ca3af; font-weight: 400; font-size: .875rem; } .client-theme-footer-nav .client-nav-item > a:hover { background: none; color: #f04c36; } .client-theme-footer-nav .client-nav-list .client-nav-list { display: flex; position: static; border: 0; box-shadow: none; padding: .5rem 0 0 1rem; }