/* Personal themes for the Mileage Calculator. * * A theme is on when is set, which only happens for a signed-in account the * sync Worker names (worker.js, "personal themes"; mileage-sync.js, "personal theme"). This file is * public like the rest of the page, so it says what each theme looks like and never whose it is. * * Each theme redefines the colour tokens in index.html's :root, then adds its decoration: the * header's .mt-deco layer, the greeting (.mt-hello, built from --mt-name) and a few flourishes. * Artwork is drawn here as small inline SVGs (img-src allows data:) in each theme's colours and * motifs, never a character or logo, so nothing is copied from the franchises it nods to. * Fonts are ones the Mac, iPhone and Windows already have: the page's CSP allows no web fonts. */ /* ---------- shared by every theme ---------- */ .mt-hello, .mt-deco { display: none; } html[data-mtheme] header { position: relative; overflow: hidden; } html[data-mtheme] header > :not(.mt-deco) { position: relative; z-index: 1; } html[data-mtheme] .mt-deco { display: block; position: absolute; inset: 0; pointer-events: none; } /* The greeting replaces the page's description, which a returning user has already read. */ html[data-mtheme] header p:not(.mt-hello) { display: none; } html[data-mtheme] .mt-hello { display: block; margin: 5px 0 0; font-size: 14px; color: var(--head-sub); } html[data-mtheme] .mt-hello::before { content: "Welcome back, " var(--mt-name, "friend"); font-weight: 700; color: var(--head-ink); } html[data-mtheme] .mt-hello::after { margin-left: .5em; } /* The sync bar sets its colours inline for the plain dark header. */ html[data-mtheme] #mileageSyncSlot span { color: var(--head-sub) !important; } html[data-mtheme] #mileageSyncSlot #mSyncStatus { color: var(--head-ink) !important; } html[data-mtheme] #mileageSyncSlot button { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.5) !important; color: var(--head-ink) !important; } @media (max-width: 640px) { html[data-mtheme] .mt-hello::after { display: block; margin: 2px 0 0; } } @media (prefers-reduced-motion: reduce) { html[data-mtheme] *, html[data-mtheme] *::before, html[data-mtheme] *::after { animation: none !important; } } /* ========================================================================================== sanrio — the whole character line-up rather than one character: a pink-to-violet-to-sky header, a candy stripe in their colours, and a parade of their signature things (a bow, a flower, a cloud, a pudding, a fried egg, a star, a lily pad, a purple sparkle) beside the title and on the cards ========================================================================================== */ html[data-mtheme="sanrio"] { --bg: #fcf6fc; --card: #fff; --ink: #472a4a; --muted: #9a5d8c; --line: #f1d4ea; --brand: #e94f96; --brand-d: #cf3b80; --head-bg: linear-gradient(110deg, #d6458a 0%, #9a5ad2 58%, #3a86c8 100%); --head-ink: #fff; --head-sub: #fbefff; --field: #fffbfe; --soft: #fbe7f3; --soft-h: #f6d7ea; --fixed: #fdf1f8; --pairadd: #fef8fc; --hint-bg: #f6f0ff; --hint-line: #dccbff; --hint-ink: #5b3a99; --radius: 22px; --mt-round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; } html[data-mtheme="sanrio"] body { background: var(--bg) url("data:image/svg+xml,"); } html[data-mtheme="sanrio"] header { padding-bottom: 26px; } html[data-mtheme="sanrio"] .mt-deco { background: /* the candy stripe: red, pink, lavender, violet, sky, yellow, mint */ linear-gradient(90deg, #ff2e63 0 14.28%, #ffb3d1 0 28.57%, #d7c2ff 0 42.85%, #8e6bd8 0 57.14%, #9ad8ff 0 71.42%, #ffe070 0 85.71%, #9fe3b4 0) bottom / 100% 8px no-repeat, /* a cloud, stars and sparkles drifting across the middle */ url("data:image/svg+xml,") right 34% center / auto 100% no-repeat; } /* A phone's header has no free space beside the title and buttons: keep only the stripe there. */ @media (max-width: 640px) { html[data-mtheme="sanrio"] .mt-deco { background: linear-gradient(90deg, #ff2e63 0 14.28%, #ffb3d1 0 28.57%, #d7c2ff 0 42.85%, #8e6bd8 0 57.14%, #9ad8ff 0 71.42%, #ffe070 0 85.71%, #9fe3b4 0) bottom / 100% 8px no-repeat; } } html[data-mtheme="sanrio"] header h1 { font-family: var(--mt-round); font-size: 23px; font-weight: 700; letter-spacing: .01em; } /* The parade: bow, flower, cloud, pudding, fried egg, star, lily pad, purple sparkle. */ html[data-mtheme="sanrio"] header h1::after { content: ""; display: inline-block; width: 200px; height: 24px; margin-left: 12px; vertical-align: -4px; max-width: 100%; background: url("data:image/svg+xml,") left center / contain no-repeat; } html[data-mtheme="sanrio"] .mt-hello::before { content: "Welcome back, " var(--mt-name, "friend") " \273F"; } html[data-mtheme="sanrio"] .mt-hello::after { content: "Every mile's a cute little adventure."; } html[data-mtheme="sanrio"] .card { border: 2px solid var(--line); box-shadow: 0 8px 22px rgba(154,90,210,.08); } html[data-mtheme="sanrio"] .card h2 { font-family: var(--mt-round); color: #c93a82; font-size: 17px; } /* Each card gets a different member of the line-up: a star by default, then a pudding, a flower and a cloud. */ html[data-mtheme="sanrio"] .card h2::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 7px; vertical-align: -3px; background: url("data:image/svg+xml,") center / contain no-repeat; } html[data-mtheme="sanrio"] main > section:nth-of-type(1) h2::before { background-image: url("data:image/svg+xml,"); } html[data-mtheme="sanrio"] #reportCard h2::before { background-image: url("data:image/svg+xml,"); } html[data-mtheme="sanrio"] main > section:nth-of-type(4) h2::before { background-image: url("data:image/svg+xml,"); } html[data-mtheme="sanrio"] .tab { font-family: var(--mt-round); } html[data-mtheme="sanrio"] .tab.active { color: #c93a82; border-bottom-width: 3px; } html[data-mtheme="sanrio"] input, html[data-mtheme="sanrio"] select { border-radius: 12px; } html[data-mtheme="sanrio"] .btn { border-radius: 999px; font-family: var(--mt-round); } html[data-mtheme="sanrio"] .btn:not(.ghost):not(.danger) { background: linear-gradient(135deg, #f0569c, #a45bd8); box-shadow: 0 4px 12px rgba(164,91,216,.25); } html[data-mtheme="sanrio"] .btn:not(.ghost):not(.danger):hover { background: linear-gradient(135deg, #de4189, #8f47c6); } html[data-mtheme="sanrio"] .btn.ghost { color: #a02e6c; } html[data-mtheme="sanrio"] .btn.danger { border-radius: 999px; } html[data-mtheme="sanrio"] .totals { border-top: 2px dashed var(--line); } html[data-mtheme="sanrio"] .totals .t b { color: #9a4fcf; font-family: var(--mt-round); } @media (max-width: 640px) { html[data-mtheme="sanrio"] .grid tr { border-radius: 18px; } } /* ========================================================================================== illenium — night-to-sunset sky over mountains, stars, a dancing equalizer, glass cards and neon violet-to-cyan accents ========================================================================================== */ html[data-mtheme="illenium"] { color-scheme: dark; --bg: #0a0718; --card: rgba(24,18,52,.74); --ink: #f1edff; --muted: #aaa2d6; --line: rgba(167,148,255,.22); --brand: #8b5cf6; --brand-d: #7c3aed; --good: #34d399; --warn: rgba(250,204,21,.16); --warnline: rgba(250,204,21,.45); --danger: #fb7185; --head-bg: linear-gradient(180deg, #0c0925 0%, #1f1045 38%, #4f1c68 70%, #a3406f 100%); --head-ink: #fff; --head-sub: #ddd2ff; --field: rgba(255,255,255,.06); --soft: rgba(255,255,255,.08); --soft-h: rgba(255,255,255,.15); --fixed: rgba(255,255,255,.035); --pairadd: rgba(255,255,255,.025); --warn-ink: #fde68a; --warnrow: rgba(250,204,21,.07); --danger-h: rgba(251,113,133,.14); --hint-bg: rgba(34,211,238,.08); --hint-line: rgba(34,211,238,.32); --hint-ink: #a5f3fc; --radius: 16px; --mt-wide: "Avenir Next", "Montserrat", "Segoe UI", system-ui, sans-serif; } html[data-mtheme="illenium"] body { background: radial-gradient(ellipse 70% 50% at 12% 18%, rgba(139,92,246,.28), transparent 70%), radial-gradient(ellipse 60% 45% at 88% 40%, rgba(34,211,238,.16), transparent 70%), radial-gradient(ellipse 80% 50% at 50% 105%, rgba(236,72,153,.2), transparent 70%), var(--bg); background-attachment: fixed; } html[data-mtheme="illenium"] header { padding-bottom: 70px; } html[data-mtheme="illenium"] .mt-deco { background: /* mountains: a far range in dusk violet, a near one in the page's own colour so the header melts into it */ url("data:image/svg+xml,") bottom / 100% 64px no-repeat, /* the sun sinking behind them */ radial-gradient(circle at 70% 100%, rgba(255,196,160,.95) 0 34px, rgba(255,128,160,.45) 60px, transparent 130px), /* stars */ url("data:image/svg+xml,") top left / 240px 90px repeat-x; } html[data-mtheme="illenium"] header h1 { font-family: var(--mt-wide); font-weight: 500; font-size: 19px; text-transform: uppercase; letter-spacing: .3em; text-shadow: 0 0 18px rgba(196,181,253,.6); } html[data-mtheme="illenium"] header h1::after { content: ""; display: inline-block; width: 46px; height: 20px; margin-left: 10px; vertical-align: -2px; background: url("data:image/svg+xml,") center / contain no-repeat; } @media (max-width: 640px) { html[data-mtheme="illenium"] header h1 { font-size: 16px; letter-spacing: .2em; } html[data-mtheme="illenium"] header h1::after { width: 36px; margin-left: 6px; } } html[data-mtheme="illenium"] .mt-hello::after { content: "Every mile's the build-up. Payday's the drop."; font-style: italic; } html[data-mtheme="illenium"] .card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 12px 40px rgba(0,0,0,.4), 0 0 32px rgba(139,92,246,.1); } html[data-mtheme="illenium"] .card h2, html[data-mtheme="illenium"] .tab { font-family: var(--mt-wide); text-transform: uppercase; letter-spacing: .16em; font-size: 14px; } html[data-mtheme="illenium"] .card h2 { background: linear-gradient(90deg, #d8b4fe, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } html[data-mtheme="illenium"] .tab.active { color: #fff; border-bottom-color: #22d3ee; text-shadow: 0 0 12px rgba(34,211,238,.6); } html[data-mtheme="illenium"] select option { background: #1a1438; color: #f1edff; } html[data-mtheme="illenium"] input:focus, html[data-mtheme="illenium"] select:focus { outline-color: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,.35); } html[data-mtheme="illenium"] .btn:not(.ghost):not(.danger) { background: linear-gradient(90deg, #8b5cf6, #d946ef 55%, #22d3ee); background-size: 200% 100%; box-shadow: 0 0 18px rgba(168,85,247,.45); animation: mtShimmer 6s ease-in-out infinite alternate; } html[data-mtheme="illenium"] .btn.ghost { border: 1px solid var(--line); } html[data-mtheme="illenium"] .mapbtn.has { background: rgba(52,211,153,.14); color: #6ee7b7; border-color: rgba(52,211,153,.35); } html[data-mtheme="illenium"] .est { color: #fcd34d; } html[data-mtheme="illenium"] .totals .t b { color: #fff; text-shadow: 0 0 14px rgba(34,211,238,.55); } html[data-mtheme="illenium"] .mapcard { background: #161130; } @keyframes mtShimmer { from { background-position: 0 0; } to { background-position: 100% 0; } } /* ========================================================================================== onepiece — open sea: a night-blue sky, a ship under sail on the waves breaking onto a sand and sea-chart page, a straw hat by the title, anchors, and a red-and-gold crew palette ========================================================================================== */ html[data-mtheme="onepiece"] { --bg: #efe1c1; --card: #fbf4e2; --ink: #2b1d0e; --muted: #7a5b39; --line: #dcc497; --brand: #c62828; --brand-d: #a51f1f; --head-bg: linear-gradient(180deg, #0a2748 0%, #0e4677 55%, #1b76b1 100%); --head-ink: #fff8e7; --head-sub: #ffe3a3; --field: #fffaf0; --soft: #efdfbb; --soft-h: #e5d0a3; --fixed: #f4e8cc; --pairadd: #f8eed6; --hint-bg: #f5ebd2; --hint-line: #d8bf88; --hint-ink: #5a3d12; --radius: 10px; --mt-chart: "Copperplate", "Copperplate Gothic Bold", "Georgia", serif; } html[data-mtheme="onepiece"] body { background: /* a compass rose, faint, like a sea chart's */ url("data:image/svg+xml,") right -60px bottom -60px / 340px no-repeat fixed, linear-gradient(rgba(122,91,57,.07) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(122,91,57,.07) 1px, transparent 1px) 0 0 / 44px 44px, var(--bg); } html[data-mtheme="onepiece"] header { padding-bottom: 54px; } html[data-mtheme="onepiece"] .mt-deco { background: /* waves: a far swell, then foam breaking onto the page's sand */ url("data:image/svg+xml,") bottom left / 320px 30px repeat-x, /* a ship under full sail, and gulls */ url("data:image/svg+xml,") left 58% bottom 6px / 116px auto no-repeat; } html[data-mtheme="onepiece"] header h1 { font-family: var(--mt-chart); font-size: 23px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.25); } html[data-mtheme="onepiece"] header h1::before { content: ""; display: inline-block; width: 44px; height: 28px; margin-right: 10px; vertical-align: -4px; background: url("data:image/svg+xml,") center / contain no-repeat; } @media (max-width: 640px) { html[data-mtheme="onepiece"] header { padding-bottom: 70px; } html[data-mtheme="onepiece"] header h1 { font-size: 19px; } html[data-mtheme="onepiece"] .mt-deco { background-position: bottom left, right 14px bottom 6px; background-size: 320px 30px, 84px auto; } } html[data-mtheme="onepiece"] .mt-hello::before { content: "Welcome aboard, Captain " var(--mt-name, ""); } html[data-mtheme="onepiece"] .mt-hello::after { content: "Charting the Grand Line, one clinic at a time."; font-style: italic; } html[data-mtheme="onepiece"] .card { border-color: #cdb07a; box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px #e2cb98, 0 3px 10px rgba(74,48,16,.12); } html[data-mtheme="onepiece"] .card h2, html[data-mtheme="onepiece"] .tab { font-family: var(--mt-chart); letter-spacing: .04em; } html[data-mtheme="onepiece"] .card h2 { color: #7b1c1c; font-size: 18px; } html[data-mtheme="onepiece"] .card h2::before { content: "\2693\FE0E"; margin-right: 8px; color: #0e4677; } html[data-mtheme="onepiece"] .tab.active { color: #7b1c1c; } html[data-mtheme="onepiece"] .btn:not(.ghost):not(.danger) { box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), 0 0 0 1px #8e1b1b; } html[data-mtheme="onepiece"] .btn.lg { background: linear-gradient(180deg, #d63a3a, #b02222); border: 1px solid #e0a526; } html[data-mtheme="onepiece"] input:focus, html[data-mtheme="onepiece"] select:focus { outline-color: #e0a526; border-color: #e0a526; } html[data-mtheme="onepiece"] .totals { border-top: 2px solid #cdb07a; } html[data-mtheme="onepiece"] .totals .t { font-family: var(--mt-chart); letter-spacing: .03em; } html[data-mtheme="onepiece"] .totals .t b { color: #7b1c1c; font-family: Georgia, serif; } /* ========================================================================================== lucy — a 1950s black-and-white television night: a glowing screen with scan lines, a script title beside a little rabbit-ears TV set, atomic starbursts, cherry red on a cream polka-dot page ========================================================================================== */ html[data-mtheme="lucy"] { --bg: #f8f2e9; --card: #fffdf9; --ink: #1c1b1b; --muted: #6d6461; --line: #e2d8cd; --brand: #c8102e; --brand-d: #a00c24; --head-bg: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), radial-gradient(ellipse 80% 140% at 38% 30%, #4c4b50 0%, #26252a 55%, #111113 100%); --head-ink: #fff; --head-sub: #ebe4db; --field: #fff; --soft: #f5ebe5; --soft-h: #eddcd4; --fixed: #f6efe8; --pairadd: #fcf8f3; --hint-bg: #fdf0f1; --hint-line: #f2c4ca; --hint-ink: #7d1022; --radius: 8px; --mt-script: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; --mt-mid: "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; } html[data-mtheme="lucy"] body { background: radial-gradient(circle, rgba(200,16,46,.13) 3px, transparent 3.5px) 0 0 / 28px 28px, radial-gradient(circle, rgba(200,16,46,.13) 3px, transparent 3.5px) 14px 14px / 28px 28px, var(--bg); } html[data-mtheme="lucy"] header { padding-top: 16px; padding-bottom: 24px; } html[data-mtheme="lucy"] .mt-deco { background: linear-gradient(#fff, #fff) left 0 bottom 7px / 100% 2px no-repeat, linear-gradient(#c8102e, #c8102e) bottom / 100% 7px no-repeat, url("data:image/svg+xml,") right 32% center / auto 100% no-repeat; } html[data-mtheme="lucy"] header h1 { font-family: var(--mt-script); font-weight: 700; font-size: 32px; line-height: 1.15; } html[data-mtheme="lucy"] header h1::before { content: ""; display: inline-block; width: 42px; height: 38px; margin-right: 10px; vertical-align: -6px; background: url("data:image/svg+xml,") center / contain no-repeat; } html[data-mtheme="lucy"] .mt-hello { margin-top: 2px; } html[data-mtheme="lucy"] .mt-hello::before { font-family: var(--mt-script); font-size: 22px; font-weight: 700; } html[data-mtheme="lucy"] .mt-hello::after { content: "Log your miles \2014 no \2019splainin\2019 required."; margin-left: .9em; font-family: var(--mt-mid); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } html[data-mtheme="lucy"] .card { border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); } html[data-mtheme="lucy"] .card h2, html[data-mtheme="lucy"] .tab { font-family: var(--mt-mid); text-transform: uppercase; letter-spacing: .1em; } html[data-mtheme="lucy"] .card h2 { font-size: 15px; } html[data-mtheme="lucy"] .card h2::before { content: "\2726"; color: var(--brand); margin-right: 8px; } html[data-mtheme="lucy"] .tab.active { border-bottom-color: var(--brand); border-bottom-width: 3px; } html[data-mtheme="lucy"] .btn { border-radius: 999px; font-family: var(--mt-mid); letter-spacing: .03em; } html[data-mtheme="lucy"] .btn:not(.danger) { border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); } html[data-mtheme="lucy"] .btn:not(.danger):active { transform: translate(2px, 2px); box-shadow: none; } html[data-mtheme="lucy"] .btn.danger { border-radius: 999px; } html[data-mtheme="lucy"] .totals { border-top: 2px solid var(--ink); } html[data-mtheme="lucy"] .totals .t { font-family: var(--mt-mid); text-transform: uppercase; letter-spacing: .08em; } html[data-mtheme="lucy"] .totals .t b { color: var(--brand); letter-spacing: 0; } @media (max-width: 640px) { html[data-mtheme="lucy"] .grid tr { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } /* no room beside the title and buttons: the starbursts go, the red band stays */ html[data-mtheme="lucy"] .mt-deco { background: linear-gradient(#fff, #fff) left 0 bottom 7px / 100% 2px no-repeat, linear-gradient(#c8102e, #c8102e) bottom / 100% 7px no-repeat; } html[data-mtheme="lucy"] .mt-hello::after { margin-left: 0; } }