/* ---------- Ashella Vibes brand palette ---------- * Around theme ships with a navy "dark" token (#2d374b) that Josefin reads as * blue and wanted removed in favour of a warmer earthy palette. * Driven by her design comp in josefin-feedback/ashella-vibes-josefin.pdf. */ :root { --ashella-cream: #F8F7F6; --ashella-ink: #1a1a1a; /* warm near-black, replaces navy */ --ashella-ink-rgb: 26, 26, 26; --ashella-ink-hover: #333333; --ashella-accent: #c0a394; /* taupe-rose from the mockup */ --ashella-accent-rgb: 192, 163, 148; --ashella-accent-hover: #a78876; /* Sage tones — used for the "Operational" status cue. Reads as "green = healthy" but in a muted, earthy way that sits with cream + taupe. */ --ashella-sage: #6b7d5e; --ashella-sage-rgb: 107, 125, 94; --ashella-sage-hover: #566348; --ashella-sage-soft: #eceee7; /* pale sage — soft alert background */ --ashella-sage-ink: #3d4636; /* dark sage — alert text */ /* Cascade through every Around .bg-dark / .border-dark / .text-dark consumer */ --bs-dark: var(--ashella-ink); --bs-dark-rgb: var(--ashella-ink-rgb); /* Inline content links (privacy / terms / status pages) take the taupe accent instead of the theme's bright green #0ABF53. */ --bs-link-color: var(--ashella-accent); --bs-link-hover-color: var(--ashella-accent-hover); /* Success / operational token (drives .bg-success, .text-success) */ --bs-success: var(--ashella-sage); --bs-success-rgb: var(--ashella-sage-rgb); } body { background-color: var(--ashella-cream) !important; overflow-x: hidden; /* defensive — kills any sneaky horizontal scroll on mobile */ } .color-title { color: var(--ashella-accent) !important; } /* Around hardcodes #2d374b on these three rules — override explicitly */ .text-dark { color: var(--ashella-ink) !important; } .btn-dark { --bs-btn-bg: var(--ashella-ink); --bs-btn-border-color: var(--ashella-ink); --bs-btn-hover-bg: var(--ashella-ink-hover); --bs-btn-hover-border-color: var(--ashella-ink-hover); --bs-btn-active-bg: var(--ashella-ink-hover); --bs-btn-active-border-color: var(--ashella-ink-hover); --bs-btn-disabled-bg: var(--ashella-ink); --bs-btn-disabled-border-color: var(--ashella-ink); --bs-btn-focus-shadow-rgb: var(--ashella-ink-rgb); } .btn-outline-dark { --bs-btn-color: var(--ashella-ink); --bs-btn-border-color: var(--ashella-ink); --bs-btn-hover-bg: var(--ashella-ink); --bs-btn-hover-border-color: var(--ashella-ink); --bs-btn-active-bg: var(--ashella-ink); --bs-btn-active-border-color: var(--ashella-ink); --bs-btn-disabled-color: var(--ashella-ink); --bs-btn-disabled-border-color: var(--ashella-ink); --bs-btn-focus-shadow-rgb: var(--ashella-ink-rgb); } /* Contact-form Submit picks up the taupe accent — matches Josefin's mockup page 6 where SUBMIT is rendered in the rose-taupe brand colour, not black. */ form button.btn-dark[type="submit"] { --bs-btn-bg: var(--ashella-accent); --bs-btn-border-color: var(--ashella-accent); --bs-btn-hover-bg: var(--ashella-accent-hover); --bs-btn-hover-border-color: var(--ashella-accent-hover); --bs-btn-active-bg: var(--ashella-accent-hover); --bs-btn-active-border-color: var(--ashella-accent-hover); --bs-btn-focus-shadow-rgb: var(--ashella-accent-rgb); } /* ---------- Nav links (Home / Contact) ---------- * Matches Josefin's mockup page 1: plain uppercase letter-spaced text, * no pill/fill, no active-page highlight, taupe-rose colour on hover only. * Replaces the previous btn-dark/btn-outline-dark active-page pill style. */ .nav-link-ashella { display: inline-block; padding: 0.5rem 1.1rem; color: var(--ashella-ink); background: transparent; border: 0; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; text-decoration: none; transition: color 0.2s ease; } .nav-link-ashella:hover, .nav-link-ashella:focus, .nav-link-ashella:active { color: var(--ashella-accent); background: transparent; text-decoration: none; outline: 0; } /* ---------- Inline body links + operational status ---------- * privacy / terms / status pages have plain inline tags that previously * picked up the theme's bright green default. They now use the taupe accent * via :root --bs-link-color above, plus a subtle hover underline so they * still announce themselves amongst body text. * * Around also cascades a second .alert-success rule that pushes white text * onto a bright teal background — hard to read. Overridden here with sage * tones for the "All systems operational" alert on /status, and the * Operational badges in the components list. */ a:not([class]):hover, a.link-body:hover { text-decoration: underline; } .alert-success { color: var(--ashella-sage-ink) !important; background-color: var(--ashella-sage-soft) !important; border-color: var(--ashella-sage) !important; box-shadow: 0 0.25rem 1.5rem rgba(var(--ashella-sage-rgb), 0.18), 0 0.25rem 1.5rem rgba(var(--ashella-ink-rgb), 0.06) !important; } .alert-success .bi-check-circle-fill { color: var(--ashella-sage) !important; } .badge.bg-success { background-color: var(--ashella-sage) !important; color: #fff !important; } /* ---------- Products grid responsive sizing ---------- * Source thumbnails are only 125x250 px. On mobile (row-cols-1) each card * was full-width (~334px after gutters) forcing a ~2.7x upscale = blur. * Grid now starts at 2 cols on mobile (closer to native size), and we cap * the rendered image so it never grows past a sensible thumbnail height * even on very narrow viewports. */ @media (max-width: 575.98px) { /* Products page: 1 card per row on mobile, centred and capped at 280px wide so the 125x250 source thumbnail upscales no more than 2.2x. Keeps the page predictable — no row/col overflow tricks needed. */ .container > .shadow-sm.p-3 { padding: 0.75rem !important; } .row.row-cols-1 > * { max-width: 280px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } .card-transition-zoom .card-img { max-height: 300px; object-fit: contain; } } /* ---------- Layout overrides (unchanged from initial deploy) ---------- */ .navbar-brand-logo { width: 100%; min-width: 12rem; max-width: 12rem; } #content { min-height: 80vh; } .display-6 { font-size: 2.2rem !important; }