/* The PartyRentals customer website: the app's sticker-book look (DESIGN.md at the repo root), based on the ZipWash site.
   Cream ground with a confetti grid, plum outlines with a hard flat shadow, grape as the one accent, sun for highlights.
   Display type is Archivo Black, labels Space Mono, body Archivo (bundled, SIL OFL 1.1 - ../fonts/OFL.txt). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(../fonts/archivo-latin-wght-normal.woff2) format("woff2-variations"), url(../fonts/archivo-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(../fonts/archivo-latin-ext-wght-normal.woff2) format("woff2-variations"), url(../fonts/archivo-latin-ext-wght-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../fonts/archivo-black-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
    src: url(../fonts/space-mono-latin-700-normal.woff2) format("woff2"); }

:root {
    --pr-cream: #FFF6E9; --pr-ink: #21123F; --pr-ink-soft: #4E4570; --pr-grape: #6C2BD9; --pr-grape-dim: #5520B0; --pr-grape-soft: #EFE6FF;
    --pr-sun: #FFC233; --pr-pink: #FF4F9A; --pr-mint: #18B26B; --pr-aqua: #3CC8F5;
    --pr-outline: 2px solid var(--pr-ink); --pr-shadow: 0 4px 0 var(--pr-ink);
    --pr-display: "Archivo Black", "Archivo", system-ui, sans-serif; --pr-mono: "Space Mono", ui-monospace, monospace;
    --bs-body-font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-link-color: var(--pr-grape-dim); --bs-link-color-rgb: 85, 32, 176; --bs-link-hover-color: var(--pr-ink); --bs-link-hover-color-rgb: 33, 18, 63;
    --da-soft: var(--pr-grape-soft);
}

/* A website is light whatever the phone says: the look is one look. */
body {
    color: var(--pr-ink);
    background-color: var(--pr-cream);
    background-image: radial-gradient(rgba(108, 43, 217, .10) 1.4px, transparent 1.6px), radial-gradient(rgba(255, 79, 154, .08) 1.4px, transparent 1.6px);
    background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px;
}
h1, h2, h3, .h1, .h2, .h3, .display-6, .navbar-brand { font-family: var(--pr-display); font-weight: 400 !important; letter-spacing: -.01em; }
.da-nav { background: #fff; border-bottom: var(--pr-outline) !important; }
.da-logo { background: transparent; width: 38px; height: 38px; }
.da-logo img { width: 38px; height: 38px; }
.card, .da-tile { border: var(--pr-outline); box-shadow: var(--pr-shadow); border-radius: 18px; background: #fff; }
a.da-tile:hover { outline: 0; background: #FFFBF3; }
a.da-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pr-ink); }
.da-tile .material-icons { color: var(--pr-grape); }
.da-hero { background: var(--pr-grape); color: #fff; border: var(--pr-outline); box-shadow: 0 6px 0 var(--pr-ink); border-radius: 24px; position: relative; overflow: hidden; }
.da-hero .pr-hero-art { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); height: 170px; }
@media (max-width: 767.98px) { .da-hero .pr-hero-art { display: none; } }
.da-hero .btn { font-weight: 800; border: var(--pr-outline); box-shadow: 0 3px 0 var(--pr-ink); }
.da-hero .btn:active { transform: translateY(3px); box-shadow: none; }
.da-hero .btn-light { background: var(--pr-sun); color: var(--pr-ink); }
.da-hero .btn-light:hover { background: #FFD25C; color: var(--pr-ink); }
.da-hero .btn-outline-light { background: #fff; color: var(--pr-ink); }
.da-hero .btn-outline-light:hover { background: var(--pr-grape-soft); color: var(--pr-ink); }
.btn-brand, .btn-primary {
    --bs-btn-bg: var(--pr-grape); --bs-btn-border-color: var(--pr-ink); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--pr-grape-dim); --bs-btn-hover-border-color: var(--pr-ink); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pr-grape-dim); --bs-btn-active-border-color: var(--pr-ink); --bs-btn-active-color: #fff;
    border-width: 2px; font-weight: 800; box-shadow: 0 3px 0 var(--pr-ink);
}
.btn-brand:active, .btn-primary:active { transform: translateY(3px); box-shadow: none; }
.text-brand { color: var(--pr-grape-dim) !important; }
.nav-link.active { color: var(--pr-grape-dim) !important; }
.pr-overline { font-family: var(--pr-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-ink-soft); }
@media (prefers-reduced-motion: reduce) { .btn:active, a.da-tile:active { transform: none; } }