/* ============================================================= Pocky Dog Walking — custom stylesheet ------------------------------------------------------------- Almost all styling on this site comes from Tailwind's utility classes written directly in the HTML. This file only holds the handful of things Tailwind's CDN build can't do on its own (page-level defaults, the decorative stripe/ribbon trims, print rules, and one small hover effect). ============================================================= */ html { scroll-behavior: smooth; } body { font-family: "Nunito", ui-sans-serif, system-ui, sans-serif; } /* EDIT HERE: heading font. Swap "Playfair Display" for another Google Font name (and update the in every page's ) to change the look. */ .font-display { font-family: "Playfair Display", ui-serif, Georgia, serif; } /* EDIT HERE: the small cursive accent font used on flourish words. */ .font-script { font-family: "Alex Brush", cursive; } /* EDIT HERE: the retro script font used only for the "Pocky" wordmark. */ .font-logo { font-family: "Playball", cursive; } /* Candy-stripe trim used at the very top/bottom of every page. */ .ribbon-stripes { background-image: repeating-linear-gradient( 90deg, #f472b6 0, #f472b6 14px, #fdf2f8 14px, #fdf2f8 28px ); } /* Softer vertical candy stripe used behind the header nav bar. */ .stripe-header-bg { background-image: repeating-linear-gradient( 90deg, #fbcfe0 0, #fbcfe0 16px, #fdecf3 16px, #fdecf3 32px ); } /* Animated underline used on the desktop nav links */ .link-underline { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 0.2s ease-in-out; } .link-underline:hover, .link-underline:focus-visible { background-size: 100% 2px; } /* ------------------------------------------------------------- Flyer page: printable, single sheet, no site chrome ------------------------------------------------------------- */ @media print { .no-print { display: none !important; } body { background: #fff !important; } .flyer-sheet { box-shadow: none !important; margin: 0 !important; width: 100% !important; min-height: 100vh !important; } @page { size: letter; margin: 0.35in; } }