/* ============================================================ Andreas Advocates - Forest theme Deep forest green + maroon accent (instead of gold). A gilt-edged law-tome feel - swapping gold for burgundy is what most clearly sets this theme apart from Classic and Slate, both of which use a gold-family accent. Overrides via [data-theme="forest"] attribute on . ============================================================ */ [data-theme="forest"] { --aa-primary: #1f3b2c; --aa-primary-dark: #122319; --aa-accent: #6e2d3a; --aa-accent-soft: #b07882; --aa-paper: #efe5d0; --aa-paper-deep: #ddd3bc; --aa-ink: #1a1f1c; --aa-ink-soft: #3d4842; --aa-muted: #6e7a72; --aa-line: #cfc6ad; --aa-line-soft: #e5dcc4; --aa-bg: #f5edd8; --aa-bg-elevated: #fbf6e6; } [data-theme="forest"] .aa-shell ::selection { background: var(--aa-accent); color: #fff; } [data-theme="forest"] .aa-shell ::-moz-selection { background: var(--aa-accent); color: #fff; } /* The italic eyebrow ('Practice areas', '01', etc.) is the most-repeated accent-coloured element on the site. In maroon it reads completely differently to the gold of Classic/Slate. */ [data-theme="forest"] .aa-eyebrow { color: var(--aa-accent); } /* Soft sections get a warm green tint so they read 'foliage-tinted parchment' rather than the cooler greys/creams of the other themes. */ [data-theme="forest"] .aa-section--soft { background: rgba(31, 59, 44, 0.06); } [data-theme="forest"] .aa-area:hover { background: rgba(110, 45, 58, 0.05); } /* Hero: deep forest green panel with cream text - the biggest single distinguishing mark from Classic (cream hero) and Slate (dark mode). */ [data-theme="forest"] .aa-hero { background: linear-gradient(180deg, #15301f 0%, var(--aa-primary) 100%); color: var(--aa-paper); border-bottom-color: rgba(0, 0, 0, 0.2); } /* The 1px ornament line at the top of the hero - cream against the green panel so it reads as a clean vertical highlight rather than blending in. */ [data-theme="forest"] .aa-hero::before { background: rgba(241, 234, 217, 0.75); } [data-theme="forest"] .aa-hero h1 { color: var(--aa-paper); } [data-theme="forest"] .aa-hero h1 em { color: var(--aa-accent-soft); } [data-theme="forest"] .aa-hero__lead { color: rgba(241, 234, 217, 0.78); } [data-theme="forest"] .aa-hero__crest { color: var(--aa-paper); background: rgba(241, 234, 217, 0.08); border-color: rgba(241, 234, 217, 0.25); } [data-theme="forest"] .aa-hero__ornament { color: var(--aa-accent-soft); } /* Hero buttons need to read against the green: invert primary/ghost so primary reads cream-on-maroon (theme accent) and ghost reads cream-outlined. */ [data-theme="forest"] .aa-hero .aa-btn--primary { background: var(--aa-accent); border-color: var(--aa-accent); color: #fff; } [data-theme="forest"] .aa-hero .aa-btn--primary:hover { background: #5a232f; } [data-theme="forest"] .aa-hero .aa-btn--ghost { color: var(--aa-paper); border-color: rgba(241, 234, 217, 0.45); background: transparent; } [data-theme="forest"] .aa-hero .aa-btn--ghost:hover { background: rgba(241, 234, 217, 0.1); color: var(--aa-paper); } /* Eyebrow contrast on dark green panels. The default --light variant resolves to accent-soft (rosé) which is muddy on forest green; force it to cream so 'Client portal' etc. read clearly. */ [data-theme="forest"] .aa-section--deep .aa-eyebrow, [data-theme="forest"] .aa-eyebrow--light { color: var(--aa-paper); } [data-theme="forest"] .aa-section--deep .aa-eyebrow::before, [data-theme="forest"] .aa-eyebrow--light::before { background: rgba(241, 234, 217, 0.7); }