/* ========================================================================== tuckermojo.com — shared styles for app pages (landing / privacy / support) Each page sets an accent by putting a class on : .app-decklearn pink → purple .app-repline red ========================================================================== */ :root { color-scheme: light dark; --fg: #1c1c1e; --bg: #ffffff; --muted: #6b6b70; --card: #f6f6f9; --line: #e5e5ea; --accent: #4c8bf5; --accent2: #4c8bf5; --link: var(--accent); /* text colour; overridden per-app below */ } @media (prefers-color-scheme: dark) { :root { --fg: #f2f2f7; --bg: #101014; --muted: #9a9aa2; --card: #1a1a20; --line: #2c2c34; } } /* Per-app accents. Gradient colour and link colour are deliberately different: the gradient carries white glyphs (contrast is fine), link text does not. Every --link value below measures >= 4.5:1 against BOTH --bg and --card in its own theme; see the check in the commit that introduced this. */ body.app-decklearn { --accent: #f43f8e; --accent2: #a259f5; --link: #C21E6B; } body.app-repline { --accent: #c8102e; --accent2: #e5452f; --link: #B60E29; } body.app-heatmap { --accent: #0E9484; --accent2: #2D6E9E; --link: #0A6E62; } body.app-tanks { --accent: #B0631A; --accent2: #8A4B1F; --link: #8F5015; } @media (prefers-color-scheme: dark) { body.app-decklearn { --link: #FF6BAA; } body.app-repline { --link: #F0596B; } body.app-heatmap { --link: #2FB9A6; } body.app-tanks { --link: #D8853A; } } * { box-sizing: border-box; } body { font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 48rem; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; color: var(--fg); background: var(--bg); } /* Landing pages want a little more room for the feature grid. */ body.wide { max-width: 54rem; } a { color: var(--link); } /* ---- nav ---------------------------------------------------------------- */ .sitenav { display: flex; align-items: center; gap: .3rem 1.1rem; flex-wrap: wrap; font-size: .95rem; margin: 0 0 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .sitenav a { color: var(--muted); text-decoration: none; } .sitenav a:hover { color: var(--fg); text-decoration: underline; } .sitenav a[aria-current="page"] { color: var(--fg); font-weight: 650; } .sitenav .home { color: var(--fg); font-weight: 650; } .sitenav .sep { color: var(--line); } .sitenav .spacer { flex: 1 1 auto; } /* ---- typography --------------------------------------------------------- */ h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; } h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; } h3 { font-size: 1.05rem; margin: 1.75rem 0 .4rem; } .meta { color: var(--muted); font-size: .95rem; margin: 0 0 2rem; } ul, ol, dl { padding-left: 1.25rem; } li { margin: .4rem 0; } dt { font-weight: 650; margin-top: 1.25rem; } dd { margin: .25rem 0 0; color: var(--muted); } dd a { color: var(--link); } code { background: var(--card); padding: .15em .4em; border-radius: 5px; font-size: .9em; } /* Accented callout used for the one-line summary at the top of a page. */ .lede { font-size: 1.1rem; padding: 1.1rem 1.25rem; border-radius: 14px; margin: 0 0 2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent2) 13%, transparent)); } .lede.strong { font-weight: 600; } hr { border: none; border-top: 1px solid var(--line); margin: 3rem 0 1.5rem; } footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .93rem; } footer a { color: var(--muted); margin-right: 1.25rem; white-space: nowrap; } footer a:hover { color: var(--fg); } /* ---- landing page ------------------------------------------------------- */ .hero { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin-bottom: 3rem; } .hero h1 { font-size: 2.6rem; letter-spacing: -.02em; } .hero .tag { font-size: 1.2rem; color: var(--muted); margin: 0; } .appicon { width: 128px; height: 128px; border-radius: 28px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 34%, transparent); } .appicon svg { width: 60px; height: 60px; } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .grid .card { background: var(--card); border-radius: 18px; padding: 1.4rem 1.5rem; } .grid .card h3 { margin: 0 0 .35rem; font-size: 1.05rem; } .grid .card p { margin: 0; color: var(--muted); font-size: .96rem; } /* ========================================================================== Hub — the tuckermojo.com landing page, added 2026-08-19. Every app page's nav already pointed at "/" long before this existed. ========================================================================== */ body.hub { --accent: #2D6E9E; --accent2: #0E9484; --link: #245B83; } .p-tanks { --accent:#B0631A; --accent2:#8A4B1F; --link:#8F5015; } .p-heatmap { --accent:#0E9484; --accent2:#2D6E9E; --link:#0A6E62; } .p-repline { --accent:#c8102e; --accent2:#e5452f; --link:#B60E29; } .p-decklearn { --accent:#f43f8e; --accent2:#a259f5; --link:#C21E6B; } @media (prefers-color-scheme: dark) { body.hub { --link: #7FB3DC; } .p-tanks { --link:#D8853A; } .p-heatmap { --link:#2FB9A6; } .p-repline { --link:#F0596B; } .p-decklearn { --link:#FF6BAA; } } body.hub { max-width: 58rem; } .hub-hero { margin: 0 0 3.25rem; } .hub-hero h1 { font-size: 2.4rem; letter-spacing: -.025em; margin-bottom: .35rem; } .hub-hero p { font-size: 1.15rem; color: var(--muted); margin: 0; max-width: 34rem; } /* One project per row: icon, then everything else. Grid (not margins) so the gaps cannot collapse or double when a card gains a line. */ .projects { display: grid; gap: 1rem; } .project { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.35rem; align-items: start; background: var(--card); border: 1px solid transparent; border-radius: 18px; padding: 1.5rem 1.6rem; transition: border-color .15s ease, transform .15s ease; } .project:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } @media (prefers-reduced-motion: no-preference) { .project:hover { transform: translateY(-2px); } } .project .appicon { width: 4.5rem; height: 4.5rem; border-radius: 16px; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .project .appicon svg { width: 2.1rem; height: 2.1rem; } .project h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap; } .project h2 a { color: var(--fg); text-decoration: none; } .project h2 a:hover { color: var(--link); } .project .tag { margin: .3rem 0 0; color: var(--muted); } .project .note { margin: .6rem 0 0; font-size: .93rem; color: var(--muted); } .pill { font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; position: relative; top: -.1em; } .pill.live { color: var(--link); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .project .links { margin: .85rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .95rem; } .project .links a { text-decoration: none; } .project .links a:hover { text-decoration: underline; } @media (max-width: 32rem) { .project { grid-template-columns: 1fr; gap: 1rem; } .project .appicon { width: 3.5rem; height: 3.5rem; border-radius: 13px; } .project .appicon svg { width: 1.7rem; height: 1.7rem; } } /* ---- floating chip ------------------------------------------------------- For full-bleed apps (the heatmap's 100vh grid, the Table Tanks dashboard) where a nav ROW would displace the layout. Fixed, so it costs no space. */ .hubchip { position: fixed; top: .75rem; right: .85rem; z-index: 10000; display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem .42rem; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #e9eef9; text-decoration: none; background: rgba(20, 23, 32, .82); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; backdrop-filter: saturate(150%) blur(10px); } .hubchip:hover { background: rgba(20, 23, 32, .95); border-color: rgba(255, 255, 255, .34); } .hubchip:focus-visible { outline: 2px solid #4c8bf5; outline-offset: 2px; }