/** * Todo.Today — Standalone theme base * Replaces the reset / typography / grid / header CSS the Flatsome parent * used to provide. Keep this lean; component styling lives in the plugins. */ /* ── Design tokens (groundwork for the frontend reorg) ───────────────── */ :root { /* NB: the frontend components use the Lovable token set (--tt-background, --tt-foreground, --tt-muted-foreground, …) defined in the todo-today-assets plugin. These --tt-color-* ones only feed the base rules in THIS file — unused ones (muted/surface/border) were removed so nobody reaches for a token that contradicts the live palette. */ --tt-color-text: #1a1a1a; --tt-color-bg: #ffffff; --tt-color-accent: #111111; --tt-color-link: #111111; --tt-container: 1160px; /* Horizontal inset for content bands. The page shell is full-bleed on the event-listing route; each band opts in to this gutter itself. See the BAND GUTTERS block in todo-today-home-page/assets/css/home-page.css. */ --tt-gutter: 15px; /* Below 1024px every page is a single column; on tablets that column is capped at this width and centered so cards keep their phone proportions instead of stretching edge to edge. Sticky bands keep their full-width backgrounds and center their INNER content to this same cap. */ --tt-single-col-max: 600px; --tt-space-1: 4px; --tt-space-2: 8px; --tt-space-3: 12px; --tt-space-4: 16px; --tt-space-5: 24px; --tt-space-6: 32px; --tt-radius: 12px; --tt-radius-sm: 8px; --tt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Kill the mobile tap-highlight flash on every interactive element. Flatsome used to provide this reset globally; after its removal only a handful of components carried their own copy, so most buttons/links flashed the browser's default grey/blue overlay on touch. */ a, button, [role="button"], input, select, textarea, label { -webkit-tap-highlight-color: transparent; } /* Button labels are actions, not copy — in Chrome a double-click (or a double-tap on touch) selects a button's text and paints the blue selection box over it (seen on the day bar toggle). Firefox never allowed this; align Chrome with it. */ button, [role="button"] { -webkit-user-select: none; user-select: none; } body { margin: 0; font-family: var(--tt-font); font-size: 16px; line-height: 1.5; color: var(--tt-color-text); background: var(--tt-color-bg); -webkit-font-smoothing: antialiased; } /* Zero, not removed: dropping the rule would bring back the browser's own default margins (including TOP margins on every heading/paragraph), which is worse than any bottom-margin. Components own their spacing and opt in — every tt-* component already does. NB: prose-heavy pages (event description, about/privacy/terms) inherit this too and must space their own paragraphs. */ h1, h2, h3, h4, h5, h6, p, figure { margin: 0 0 var(--tt-space-4); } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--tt-color-link); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link:focus { position: fixed; left: 8px; top: 8px; z-index: 100000; background: #fff; padding: 8px 16px; clip: auto; width: auto; height: auto; } /* ── WP admin bar: desktop only ──────────────────────────────────────── * Below 1024px the admin bar is just an admin-only strip stealing vertical * space from the sticky brand band and the bottom nav, so hide it on the * frontend. WordPress also forces a margin onto to make room for it * (32px, or 46px under 782px) — that has to go too, or it leaves a gap. * :root outscores core's plain `html` selector regardless of load order. */ @media (max-width: 1023px) { #wpadminbar { display: none !important; } html:root { margin-top: 0 !important; } } /* ── Flatsome utility compat ────────────────────────────────────────────── * The parent theme provided these global utilities; markup across the plugins * (e.g. the site-wide #recurringModal popup) relies on them. Without them, * every element tagged `hidden` renders visible. Keep restoring here as needed. */ .hidden { display: none !important; } .uppercase { text-transform: uppercase; } .text-center { text-align: center; } .nowrap { white-space: nowrap; } .circle { border-radius: 100%; } .lead { font-size: 1.15em; line-height: 1.5; } /* ── Layout wrappers ─────────────────────────────────────────────────── */ /* `overflow-x: hidden` would make overflow-y compute to `auto`, turning #wrapper into a scroll container — that silently breaks every position:sticky inside it (e.g. the sidebar). `clip` prevents horizontal scroll without doing that. Sticky footer: the wrapper is a full-viewport flex column and #main soaks up the leftover space, so on short pages (empty day, empty search results) the footer sits at the bottom of the screen instead of riding up under the content with a void below it. Long pages are unaffected. dvh tracks the mobile browser's collapsing address bar; vh is the fallback. */ #wrapper { overflow-x: hidden; /* fallback for browsers without `clip` */ overflow-x: clip; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } #main { display: block; flex: 1 0 auto; } /* The admin bar adds a margin to , so a full-viewport wrapper overflows by its height and always shows a scrollbar. Only at >= 1024px — below that we hide the bar entirely (see the admin-bar block further down). */ @media (min-width: 1024px) { body.admin-bar #wrapper { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); } } /* ── Flatsome grid compatibility ───────────────────────────────────────── * A few templates + plugin partials still emit .row / .col / .large-12 / * .flex-row / .flex-col markup. Provide just enough to keep them laid out. */ .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .row-main { width: 100%; max-width: var(--tt-container); margin-left: auto; margin-right: auto; padding-left: var(--tt-space-5); padding-right: var(--tt-space-5); } .col { flex: 1 1 0; padding: 0 15px 30px; min-width: 0; } .col-inner { position: relative; } .large-12 { flex: 0 0 100%; max-width: 100%; } .flex-row { display: flex; align-items: center; } .flex-col { display: block; } .flex-left { display: flex; align-items: center; } .flex-right { display: flex; align-items: center; margin-left: auto; } .flex-grow { flex: 1 1 auto; } /* NB: no generic `.button` styles here. Their only markup consumers were the WooCommerce my-account login/lost-password templates, which this site does not use — auth lives at /join/ (todo-onboarding, OTP, no passwords). */ /* Site header + mobile bottom nav are rendered AND styled by todo-core (Hooks_Frontend::render_desktop_header / render_mobile_bottom_nav). Do not add header/nav styles here. Footer is styled in css/tt-footer.css. */ /* Hide the floating Google reCAPTCHA badge site-wide. */ .grecaptcha-badge { display: none !important; }