/* ========================================================================== MH Lake Norman, LLC — site styles Loads AFTER assets/brand/tokens.css (linked first in each ), so every var(--*) below resolves from the brand design system. Plain CSS, no build. ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--linen); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--tracking-tight); font-weight: 600; line-height: var(--leading-snug); } a { color: var(--sage-600); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--pine-700); } img { max-width: 100%; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; } .eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--text-xs); font-weight: 700; color: var(--sage-600); margin: 0 0 0.5rem; } /* Accessible focus ------------------------------------------------------- */ a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2px solid var(--lake-500); outline-offset: 3px; border-radius: 4px; } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-block; background: var(--sage-600); color: #fff; text-decoration: none; padding: 0.72rem 1.35rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; border: 1.5px solid var(--sage-600); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { background: var(--pine-700); border-color: var(--pine-700); color: #fff; } .btn.secondary { background: transparent; color: var(--sage-600); } .btn.secondary:hover { background: var(--sage-100); color: var(--pine-700); } /* Tags / pills ----------------------------------------------------------- */ .tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sage-600); background: var(--sage-100); padding: 0.28rem 0.7rem; border-radius: var(--radius-pill); } /* Header (sticky, translucent) ------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(247, 245, 241, 0.85); backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--driftwood); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; flex-wrap: wrap; } .site-header .logo { line-height: 0; } .site-header .logo img { height: 36px; width: auto; display: block; } nav.main { display: flex; flex-wrap: wrap; } nav.main a { margin-left: 1.5rem; text-decoration: none; color: var(--stone); font-weight: 600; font-size: 0.92rem; } nav.main a:hover { color: var(--sage-600); } @media (max-width: 600px) { .site-header .wrap { min-height: 0; padding-top: 0.7rem; padding-bottom: 0.7rem; } nav.main a { margin: 0 1rem 0 0; font-size: 0.85rem; } } /* Hero (water gradient) ------------------------------------------------- */ .hero { background: var(--gradient-water); color: #fff; padding: var(--space-9) 0 var(--space-8); } .hero .hero-logo { width: 280px; max-width: 72%; height: auto; display: block; margin-bottom: 1.8rem; filter: brightness(0) invert(1); } .hero .eyebrow { color: rgba(255, 255, 255, 0.82); } .hero h1 { font-size: var(--hero); line-height: var(--leading-tight); margin: 0 0 1rem; color: #fff; } .hero p.lead { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.9); max-width: 40rem; margin: 0 0 1.9rem; } .hero .btn { background: #fff; color: var(--pine-700); border-color: #fff; } .hero .btn:hover { background: var(--sage-100); color: var(--pine-900); border-color: var(--sage-100); } .hero .btn.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); margin-left: 0.6rem; } .hero .btn.secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; } /* Sections -------------------------------------------------------------- */ .section { padding: var(--space-8) 0; border-top: 1px solid var(--driftwood); } .section h2 { font-size: var(--text-2xl); margin: 0 0 0.6rem; } .section .lead { color: var(--stone); font-size: var(--text-lg); max-width: var(--measure); margin: 0 0 1.4rem; } .section p { max-width: var(--measure); } /* Brand cards ----------------------------------------------------------- */ .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.6rem; } .brand-card { background: var(--cloud); border: 1px solid var(--driftwood); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .brand-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .brand-card h3 { font-size: var(--text-xl); margin: 0.7rem 0 0.5rem; } .brand-card p { color: var(--stone); margin: 0 0 1.3rem; flex: 1; } /* Callout (sage) -------------------------------------------------------- */ .callout { background: var(--sage-100); border: 1px solid var(--sage-200); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; } .callout strong { color: var(--pine-700); } /* Contact --------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.4rem; } .kv { margin: 0; } .kv dt { font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); margin-top: 1rem; } .kv dt:first-child { margin-top: 0; } .kv dd { margin: 0.2rem 0 0; } /* Footer (dark pine band) ----------------------------------------------- */ .site-footer { background: var(--pine-900); color: rgba(255, 255, 255, 0.75); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-top: var(--space-8); padding-bottom: var(--space-6); } .footer-logo { height: 34px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); } .footer-brand .fine { color: rgba(255, 255, 255, 0.6); font-size: var(--text-sm); max-width: 26rem; margin: 0; } .footer-col, .footer-brand { font-size: var(--text-sm); line-height: 1.85; } .foot-h { color: #fff; font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.6rem; } .site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 1.1rem 0; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.55); } /* Legal / article pages ------------------------------------------------- */ .page-head { padding: var(--space-7) 0 var(--space-5); } .crumbs { font-size: var(--text-sm); color: var(--stone); } .crumbs a { color: var(--sage-600); } .legal { max-width: 760px; margin: 0 auto; padding: 0 0 var(--space-8); } .legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 0.4rem; } .legal .effective { color: var(--stone); font-size: var(--text-sm); margin: 0 0 1.8rem; } .legal h2 { font-size: var(--text-xl); margin: 2rem 0 0.6rem; } .legal h3 { font-size: var(--text-lg); margin: 1.4rem 0 0.4rem; } .legal p, .legal li { color: var(--ink); } .legal ul { padding-left: 1.2rem; } .legal li { margin: 0.35rem 0; } .legal .note { background: var(--sage-100); border: 1px solid var(--sage-200); border-radius: var(--radius-md); padding: 0.95rem 1.2rem; margin: 1.3rem 0; } .legal .note strong { color: var(--pine-700); } .legal .callout { margin: 1.4rem 0; } /* Keep long words / headlines from overflowing narrow viewports */ h1, h2, h3, .hero h1 { overflow-wrap: break-word; } body { overflow-x: hidden; } /* Responsive ------------------------------------------------------------ */ @media (max-width: 720px) { .cards, .contact-grid, .footer-grid { grid-template-columns: 1fr; } .footer-grid { gap: 1.6rem; } .hero .btn.secondary { margin-left: 0; margin-top: 0.6rem; } } @media (max-width: 430px) { .wrap { padding: 0 1.15rem; } .hero h1 { font-size: 2rem; } .hero { padding: var(--space-8) 0 var(--space-7); } }