/* =================================== Global Styles =================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #8B4513; --secondary-color: #D2691E; --dark-color: #2C1810; --light-color: #F5E6D3; --text-color: #333; --white: #fff; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --radius: 10px; --gap: 1rem; --header-height: 80px; /* used to offset fixed header */ --bg-accent: linear-gradient(180deg, #fff, #fbf8f5); --contact-bg: #c89b73; /* darker, warmer tone for stronger contrast */ /* Additional design tokens for a more modern, consistent UI */ --bg: #ffffff; --surface: #fbfbfd; --accent: #0b74de; --muted: #6b6f76; --shadow-sm: 0 1px 2px rgba(16,24,40,0.04); --shadow-md: 0 6px 18px rgba(16,24,40,0.08); --max-content-width: 1100px; --base-font-size: 16px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; } @media (max-width: 768px) { :root { --header-height: 70px; } } @media (max-width: 480px) { :root { --header-height: 65px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-color); overflow-x: hidden; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; overflow-wrap: break-word; } /* ============================== UI Helpers & Utilities - Buttons, cards, grids, improved image handling - Focus and reduced-motion accessibility ============================== */ html { font-size: var(--base-font-size); } /* Container that respects the max content width and responsive padding */ .container{ max-width:var(--max-content-width); margin:0 auto; padding-left:clamp(1rem,3vw,2rem); } /* Apply the custom cursor only when the script verifies the resource. padding-right:clamp(1rem,3vw,2rem); /* Apply the custom cursor only when the script verifies the resource. Two classes may be added to by the detection script: - `has-truetrowel-cursor-svg` -> use the SVG cursor html.has-truetrowel-cursor-svg, html.has-truetrowel-cursor-svg *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]) { cursor: url('/assets/images/truetrowel.svg') 16 16, auto; } html.has-truetrowel-cursor-png, html.has-truetrowel-cursor-png *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]) { cursor: url('/assets/images/fallback.png') 8 8, auto; } cursor: url('/assets/images/fallback.png') 8 8, auto; } /* Readable measure for article-type text blocks */ .article, main, .content{ max-width:70ch; margin:0 auto; } /* Buttons: apply class `btn` to or