/* ============================================ Law Offices of Bruce W. Minsky, P.C. Design System — extracted from DESIGN.md ============================================ */ /* Google Fonts are loaded from each page's so the font request starts in parallel with this file instead of waiting for it. */ /* ---- CSS Custom Properties ---- */ :root { /* Backgrounds */ --color-bg-primary: #0B0F1A; --color-bg-secondary: #111827; --color-bg-elevated: #1A1F2E; --color-bg-nav: rgba(11, 15, 26, 0.85); /* Accent */ --color-accent: #A87C45; --color-accent-light: #C9A84C; --color-accent-muted: #8A6535; /* Text */ --color-text-primary: #F5F0EB; --color-text-secondary: #9CA3AF; --color-text-tertiary: #6B7280; /* Borders */ --color-border: rgba(168, 124, 69, 0.2); --color-border-hover: rgba(168, 124, 69, 0.5); /* Spacing */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 80px; --space-2xl: 120px; --container-max: 1200px; --container-padding: 24px; /* Typography */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Jost', 'Inter', -apple-system, sans-serif; } /* ---- Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-weight: 300; font-size: 18px; line-height: 1.75; color: var(--color-text-primary); background-color: var(--color-bg-primary); letter-spacing: 0.01em; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ---- Container ---- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } /* ---- Navigation ---- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 72px; display: flex; align-items: center; background: var(--color-bg-nav); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(168, 124, 69, 0.15); } .nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .nav__logo { font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--color-text-primary); letter-spacing: 0.01em; white-space: nowrap; } /* ---- Card Icons ---- */ .card__icon { width: 40px; height: 40px; margin-bottom: 16px; color: var(--color-accent); } .card__icon svg { width: 100%; height: 100%; } .nav__links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav__link { font-family: var(--font-sans); font-size: 14px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); transition: color 0.3s ease; } .nav__link:hover, .nav__link--active { color: var(--color-accent); } .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .nav__hamburger span { display: block; width: 24px; height: 1.5px; background: var(--color-text-primary); transition: all 0.3s ease; } /* ---- Sections ---- */ .section { padding: var(--space-xl) 0; } .section--hero { padding: var(--space-2xl) 0; min-height: calc(100vh - 72px); display: flex; align-items: center; margin-top: 72px; } .section--alt { background: var(--color-bg-secondary); } .section--dark { background: var(--color-bg-primary); } /* ---- Eyebrow ---- */ .eyebrow { font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-md); } /* ---- Headings ---- */ .heading-hero { font-family: var(--font-serif); font-size: 68px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text-primary); margin-bottom: var(--space-md); } .heading-hero .accent { color: var(--color-accent-light); font-style: italic; } .heading-section { font-family: var(--font-serif); font-size: 44px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--color-text-primary); margin-bottom: var(--space-md); } .heading-card { font-family: var(--font-serif); font-size: 23px; font-weight: 500; line-height: 1.4; color: var(--color-text-primary); margin-bottom: var(--space-xs); } /* ---- Body Text ---- */ .text-body { font-family: var(--font-sans); font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--color-text-secondary); letter-spacing: 0.01em; } .text-subheading { font-family: var(--font-sans); font-size: 20px; font-weight: 300; line-height: 1.75; color: var(--color-text-secondary); letter-spacing: 0.01em; } .text-small { font-family: var(--font-sans); font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--color-text-secondary); } .text-disclaimer { font-family: var(--font-sans); font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--color-text-tertiary); } /* ---- Buttons ---- */ .btn { display: inline-block; font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 18px 44px; border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); cursor: pointer; transition: all 0.3s ease; } .btn:hover { background: var(--color-accent); color: var(--color-bg-primary); } .btn--small { padding: 14px 36px; font-size: 14px; } /* ---- Divider ---- */ .divider { width: 60px; height: 1px; background: var(--color-accent-muted); margin: var(--space-lg) 0; } .divider--center { margin-left: auto; margin-right: auto; } /* ---- Cards Grid ---- */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 2px; padding: 32px; transition: all 0.3s ease; } .card:hover { border-color: var(--color-border-hover); transform: translateY(-2px); } .card__title { font-family: var(--font-serif); font-size: 23px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 12px; } .card__text { font-family: var(--font-sans); font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--color-text-secondary); } /* ---- CTA Banner ---- */ .cta-banner { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-xl) 0; text-align: center; } .cta-banner .heading-section { margin-bottom: var(--space-sm); } .cta-banner .text-body { margin-bottom: var(--space-lg); max-width: 600px; margin-left: auto; margin-right: auto; } /* ---- Page Header ---- */ .page-header { padding-top: calc(72px + var(--space-xl)); padding-bottom: var(--space-xl); text-align: center; } .page-header .eyebrow { margin-bottom: var(--space-sm); } .page-header .heading-hero { margin-bottom: var(--space-md); } .page-header .text-subheading { max-width: 700px; margin: 0 auto; } /* ---- Footer ---- */ .footer { background: var(--color-bg-primary); border-top: 1px solid var(--color-border); padding: var(--space-xl) 0 var(--space-lg); } .footer__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-lg); gap: var(--space-lg); } .footer__brand { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--color-text-primary); margin-bottom: var(--space-sm); } .footer__nav { display: flex; gap: var(--space-md); list-style: none; } .footer__nav a { font-size: 15px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); transition: color 0.3s ease; } .footer__nav a:hover { color: var(--color-accent); } .footer__disclaimer { border-top: 1px solid var(--color-border); padding-top: var(--space-lg); margin-bottom: var(--space-md); } .footer__disclaimer p { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--color-text-tertiary); margin-bottom: var(--space-sm); } .footer__copyright { font-size: 14px; color: var(--color-text-tertiary); text-align: center; padding-top: var(--space-md); border-top: 1px solid var(--color-border); } /* ---- Form ---- */ .form-group { margin-bottom: var(--space-md); } .form-label { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-xs); } .form-input, .form-textarea { width: 100%; font-family: var(--font-sans); font-size: 18px; font-weight: 300; color: var(--color-text-primary); background: transparent; border: none; border-bottom: 1px solid var(--color-border); padding: 12px 0; outline: none; transition: border-color 0.3s ease; } .form-input:focus, .form-textarea:focus { border-color: var(--color-accent); } .form-textarea { resize: vertical; min-height: 120px; border: 1px solid var(--color-border); padding: 12px; border-radius: 2px; } .form-textarea:focus { border-color: var(--color-accent); } /* ---- Two Column Layout ---- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } /* ---- Animations ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate-in { opacity: 0; animation: fadeUp 0.6s ease-out forwards; } .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } /* ---- Responsive ---- */ @media (max-width: 1023px) { .heading-hero { font-size: 52px; } .heading-section { font-size: 36px; } .cards-grid { grid-template-columns: repeat(2, 1fr); } .two-col { grid-template-columns: 1fr; gap: var(--space-lg); } .footer__top { flex-direction: column; } } @media (max-width: 767px) { :root { --container-padding: 16px; } .heading-hero { font-size: 40px; } .heading-section { font-size: 32px; } .section--hero { padding: var(--space-xl) 0; min-height: auto; } .section { padding: var(--space-lg) 0; } .cards-grid { grid-template-columns: 1fr; } .nav__links { display: none; } .nav__hamburger { display: flex; } .nav__links--open { display: flex; flex-direction: column; position: fixed; top: 72px; left: 0; right: 0; background: var(--color-bg-primary); padding: var(--space-md); gap: var(--space-md); border-bottom: 1px solid var(--color-border); } .footer__nav { flex-direction: column; gap: var(--space-sm); } .btn { padding: 14px 32px; } .page-header { padding-top: calc(72px + var(--space-lg)); padding-bottom: var(--space-lg); } }