We built drhowley.com

:root {
  --color-bg: #050505;
  --color-accent: #D4AF37;
  --color-white: #ffffff;
}

/* Used everywhere */
.btn { background: var(--color-accent); }
.title { color: var(--color-white); }

<link rel="preconnect" href="fonts.googleapis.com">
<link href="...Cormorant+Garamond:wght@400;600&display=swap">

:root {
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Montserrat', sans-serif;
}

.section__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* clamp(minimum, preferred, maximum)
   - Never smaller than 1.75rem
   - Scales with viewport (4vw)
   - Never larger than 2.5rem */

.card {
  background: var(--color-dark-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s;
}
.card:hover {
  border-color: rgba(212,175,55,0.4);
}

card.addEventListener('click', async () => {
  const data = await fetch(`/api/team/${id}`).then(r => r.json());
  modal.querySelector('.name').textContent = data.name;
  modal.querySelector('.bio').innerHTML = data.bio;
  modal.classList.add('is-open');
});

const now = new Date();
const day = now.getDay();  // 0=Sun, 1=Mon...
const hour = now.getHours();

const isOpen = (day >= 1 && day <= 5)  // Mon-Fri
            && (hour >= 9 && hour < 17); // 9am-5pm

const prefs = { lightMode: false, fontSize: 16 };

function save() {
  localStorage.setItem('a11y_prefs', JSON.stringify(prefs));
}

function load() {
  const stored = localStorage.getItem('a11y_prefs');
  if (stored) Object.assign(prefs, JSON.parse(stored));
}

function apply() {
  document.body.classList.toggle('a11y-light-mode', prefs.lightMode);
  document.documentElement.style.fontSize = prefs.fontSize + 'px';
}

/* One function applies all settings at once */

function openMenu() {
  document.body.style.overflow = 'hidden';
  menu.classList.add('is-open');
}

function closeMenu() {
  document.body.style.overflow = '';
  menu.classList.remove('is-open');
}

const contentSlides = [
  // Staff cards with photo, name, title
  { type: 'staff',
    name: 'Dr. D. Brent Howley',
    title: 'Plastic Surgeon',
    image: 'dr-howley-portrait.webp' },
  { type: 'staff',
    name: 'Tania Thériault',
    title: 'Aesthetic Nurse Specialist',
    image: 'staff-portrait-tania.webp' },
  // Video segments
  { type: 'video' },
  // More staff...
];

// Alternates: staff → staff → video → staff...

function enterIdleMode() {
  savedScrollPosition = window.scrollY;
  document.body.classList.add('idle-mode');
  window.scrollTo({ top: 0, behavior: 'smooth' });
  startSlideshow();
}

function exitIdleMode() {
  stopSlideshow();
  document.body.classList.remove('idle-mode');
  // Restore where they were
  window.scrollTo({ top: savedScrollPosition });
  resetIdleTimer();
}

// Any interaction exits
['mousemove', 'touchstart', 'scroll', 'keydown']
  .forEach(e => window.addEventListener(e, exitIdleMode));

// Blurred background from staff photo
.slideshow-bg {
  background-image: url(staff-photo.webp);
  filter: blur(30px) brightness(0.4);
  transform: scale(1.1);
}

// Progress bar shows time remaining
.slideshow-progress-bar {
  background: #D4AF37;
  width: 0%;
  transition: width 0.1s linear;
}

// Fade between slides
@keyframes slideFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}