/* ============================================ Lotwright Marketing Site — Shared Stylesheet Used by every page. Page-specific styles go inline in each page's . ============================================ */ :root { --parchment: #F2EBD8; --parchment-lift: #F8F3E4; --parchment-deep: #ECE3CC; --forge: #1A1814; --forge-soft: #4A3F33; --forge-faint: #7A6C5C; --brass: #B8742B; --brass-light: #D4A574; --brass-deep: #8F5A1F; --stoneware: #2C5282; --stoneware-light: #5C7BA6; --oxblood: #8B2C2C; --patina: #3F5742; --patina-light: #5C7A4D; --rule: #E8E0CC; --rule-soft: #EDE6D3; --card: #FFFFFF; --shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.06), 0 4px 12px rgba(26, 24, 20, 0.04); --shadow-md: 0 2px 4px rgba(26, 24, 20, 0.08), 0 8px 24px rgba(26, 24, 20, 0.06); --shadow-lg: 0 4px 8px rgba(26, 24, 20, 0.10), 0 16px 48px rgba(26, 24, 20, 0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--parchment); color: var(--forge); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Roboto Slab', 'Rockwell', Georgia, 'Iowan Old Style', serif; font-weight: 600; letter-spacing: -0.015em; color: var(--forge); line-height: 1.15; } h1 { font-size: clamp(2.5rem, 5vw, 4rem); } h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 1rem; } h3 { font-size: 1.35rem; margin-bottom: 0.5rem; } h4 { font-size: 1.1rem; } p { line-height: 1.65; } a { color: var(--brass-deep); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--brass); } code { font-family: 'Courier New', monospace; background: var(--rule-soft); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.9em; } .container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; } .container-narrow { max-width: 800px; margin: 0 auto; padding: 0 2rem; } /* ====== BUTTONS ====== */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 6px; font-weight: 600; font-size: 1rem; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.15s; font-family: inherit; } .btn-primary { background: var(--brass); color: white; box-shadow: 0 2px 6px rgba(184, 116, 43, 0.3); } .btn-primary:hover { background: var(--brass-deep); color: white; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(184, 116, 43, 0.4); } .btn-secondary { background: transparent; color: var(--forge); border-color: var(--forge); } .btn-secondary:hover { background: var(--forge); color: var(--parchment); } .btn-tertiary { background: var(--stoneware); color: white; } .btn-tertiary:hover { background: #1F3D66; color: white; transform: translateY(-1px); } /* ====== UTILITY BAR ====== */ .util-bar { background: var(--forge); padding: 0.4rem 0; } .util-bar-inner { display: flex; justify-content: space-between; align-items: center; } .util-link { color: rgba(242, 235, 216, 0.75); font-size: 0.78rem; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: color 0.15s; } .util-link:hover { color: var(--parchment); } .status-dot { width: 7px; height: 7px; background: #4ade80; border-radius: 50%; display: block; flex-shrink: 0; box-shadow: 0 0 5px rgba(74, 222, 128, 0.7); } /* ====== HEADER ====== */ .site-header { background: rgba(242, 235, 216, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 100; padding: 1rem 0; } .header-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; } .brand { display: flex; align-items: center; text-decoration: none; } .brand img { height: 96px; width: auto; } .site-nav { display: flex; gap: 2rem; align-items: center; } .site-nav a { color: var(--forge); font-weight: 500; font-size: 0.95rem; padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: all 0.15s; } .site-nav a:hover { color: var(--brass-deep); border-bottom-color: var(--brass); } .site-nav .login { color: var(--stoneware); } .site-nav .login:hover { border-bottom-color: var(--stoneware); } .site-nav .cta { background: var(--brass); color: white; padding: 0.55rem 1.1rem; border-radius: 6px; font-weight: 600; border-bottom: none; } .site-nav .cta:hover { background: var(--brass-deep); color: white; border-bottom-color: transparent; } /* ====== SECTION SCAFFOLDING ====== */ .section-header { text-align: center; margin-bottom: 4rem; max-width: 720px; margin-left: auto; margin-right: auto; } .section-eyebrow { color: var(--brass-deep); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.6rem; } .section-eyebrow::before, .section-eyebrow::after { content: ''; width: 24px; height: 1.5px; background: var(--brass); } .section-lead { color: var(--forge-soft); font-size: 1.1rem; margin-top: 1rem; line-height: 1.6; } /* ====== PAGE HEADER (for non-landing pages) ====== */ .page-header { padding: 5rem 0 4rem; background: radial-gradient(ellipse at top right, rgba(184, 116, 43, 0.06) 0%, transparent 60%), radial-gradient(ellipse at bottom left, rgba(44, 82, 130, 0.05) 0%, transparent 60%), var(--parchment); text-align: center; border-bottom: 1px solid var(--rule); position: relative; } .page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: 0.4; } .page-header h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); margin-bottom: 1rem; } .page-header .lead { color: var(--forge-soft); font-size: 1.2rem; line-height: 1.6; max-width: 720px; margin: 0 auto; } /* ====== FOOTER ====== */ .site-footer { background: var(--forge); color: var(--parchment); padding: 4rem 0 2rem; position: relative; } .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-light), transparent); opacity: 0.4; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .footer-brand img { height: 64px; filter: brightness(0) invert(0.92); } .footer-brand p { color: rgba(242, 235, 216, 0.65); font-size: 0.9rem; margin-top: 1rem; max-width: 280px; line-height: 1.6; } .footer-col h4 { color: var(--brass-light); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-family: 'Inter', sans-serif; margin-bottom: 1rem; } .footer-col ul { list-style: none; } .footer-col li { padding: 0.35rem 0; } .footer-col a { color: rgba(242, 235, 216, 0.75); font-size: 0.9rem; } .footer-col a:hover { color: var(--brass-light); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: rgba(242, 235, 216, 0.5); flex-wrap: wrap; gap: 1rem; } /* ====== MOTION / ACCESSIBILITY ====== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ====== RESPONSIVE BASE ====== */ @media (max-width: 900px) { .site-nav { gap: 1rem; } .site-nav a:not(.cta):not(.login) { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .container, .container-narrow { padding: 0 1.25rem; } .page-header { padding: 3rem 0 2.5rem; } }