/* * assets/css/global.css * * Step 3: Design tokens, CSS reset, base typography. * All other stylesheets will inherit from these variables. * * To verify this loaded correctly: * Open DevTools → Elements → inspect or * You should see all --color-* and --font-* variables listed * under "Inherited from :root" in the Styles panel. */ /* ── Design Tokens ─────────────────────────────────────────────────────────── */ :root { /* Brand colours */ --color-primary: #0D6E6E; --color-primary-dark: #0A5555; --color-primary-light: #0ABABA; --color-accent: #F4A227; --color-accent-dark: #C17E3A; --color-dark: #171321; --color-white: #ffffff; --color-muted: #6A7A7A; --color-subtle: #8A9A9A; --color-border: rgba(13, 110, 110, 0.12); /* Typography */ --font-body: 'DM Sans', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* Border radius */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 9999px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 32px rgba(13, 110, 110, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-lg: 0 20px 48px rgba(13, 110, 110, 0.14), 0 4px 16px rgba(0, 0, 0, 0.06); /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* Layout */ --container-max: 1280px; --container-pad: 60px; --nav-height: 68px; } /* ── Reset ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--color-dark); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ── Base Typography ───────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--color-dark); } h1 { font-size: clamp(2.8rem, 5.5vw, 5.2rem); letter-spacing: -0.04em; } h2 { font-size: clamp(2rem, 3.5vw, 3rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.02em; } h4 { font-size: 1.1rem; font-weight: 700; } p { line-height: 1.75; } /* ── Layout Utilities ──────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* ── Scrollbar ─────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--color-white); } ::-webkit-scrollbar-thumb { background: rgba(13, 110, 110, 0.25); border-radius: 10px; } /* ── Accessibility ─────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ── Sticky Footer ─────────────────────────────────────────────────────────── */ /* .wp-site-blocks is TT25's outermost page wrapper */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } .wp-site-blocks > main { flex: 1; } /* ── Nav logout button ─────────────────────────────────────────────────────── */ .lifeiq-nav-logout .wp-block-navigation-item__content { font-weight: 400; color: var(--color-subtle) !important; } /* ── Navigation & Footer Link Hover ───────────────────────────────────────── */ /* * font-weight bump on hover can cause minor layout shift. * text-shadow simulates the bold weight visually without reflowing text. */ .wp-block-navigation .wp-block-navigation-item__content { text-decoration: none !important; } .wp-block-navigation .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content, footer a:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wp-block-button__link:hover { text-shadow: 0 0 0.65px currentColor, 0 0 0.65px currentColor, 0 0 0.65px currentColor; } /* ── WooCommerce single product — restore post title ───────────────────────── */ /* WooCommerce blockified templates use wp-block-post-title for the product name. Ensure it is always visible on individual product pages. */ .single-product .wp-block-post-title { display: block; } .special-1-hidden { display: none; } .apply-radius-border { border-radius: 9999px; } .wc-block-components-quantity-selector { display: none; } /* ── Button Defaults ───────────────────────────────────────────────────────── */ /* * Low-specificity defaults. Block editor colours are applied as inline styles * and will always override these stylesheet rules automatically. */ button, input[type="submit"], input[type="button"], input[type="reset"], .wp-block-button__link, .wp-element-button { background-color: rgb(10, 85, 85); color: #ffffff; border-radius: var(--radius-pill); } /* ── Responsive Token Overrides ────────────────────────────────────────────── */ @media (max-width: 768px) { :root { --container-pad: 24px; --space-3xl: 64px; --space-2xl: 48px; } }