/* Morganz Supply Palette and geometry adapted from the Mistral reference (orange / sunset / cream / ink). Display face swapped to Barlow Condensed to sit alongside the flame logo. Dark is the default theme; [data-theme="light"] on switches to light (see js/theme.js). */ :root { color-scheme: dark; /* Brand */ --primary: #fa520f; --primary-deep: #cc3a05; --sunshine-500: #ffb83e; --sunshine-700: #ffa110; --yellow: #ffd900; --cream: #fff8e0; /* Dark theme (default) */ --bg: #161616; --bg-warm: #1b1916; --bg-warm-deep: #1f1b14; --surface: #202020; --surface-muted: #262626; --text: #f0efeb; --text-soft: #cfcdc7; --text-muted: #b5b3ad; --text-faint: #8f8d88; --border: #2c2c2c; --border-mid: #333333; --border-strong: #4a4a4a; --border-warm: #3a3223; --link: #ffb83e; --link-hover: #ffd06a; --eyebrow: #ffa110; --shadow: rgba(0, 0, 0, 0.35); --btn-primary-bg: #cc3a05; --btn-primary-bg-hover: #fa520f; --btn-primary-text: #ffffff; --btn-contrast-bg: #fff8e0; --btn-contrast-bg-hover: #ffffff; --btn-contrast-text: #1f1f1f; --btn-outline-border: #4a4a4a; --btn-outline-border-hover: #f0efeb; --badge-bg: #cc3a05; --badge-text: #ffffff; --footer-bg: #0e0e0e; --footer-text: #d6d6d6; --footer-fine: #9a9a9a; --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --r-md: 8px; --r-lg: 12px; --container: 1200px; --gutter: 24px; } :root[data-theme="light"] { color-scheme: light; /* Light theme */ --bg: #ffffff; --bg-warm: #fffaeb; /* about section */ --bg-warm-deep: #fff8e0; /* hero, featured card */ --surface: #ffffff; /* cards, fact list */ --surface-muted: #ededed; /* map backing */ --text: #1f1f1f; --text-soft: #3d3d3d; --text-muted: #4a4a4a; --text-faint: #6a6a6a; --border: #ededed; --border-mid: #e5e5e5; --border-strong: #c7c7c7; --border-warm: #e6d5a8; --link: #cc3a05; --link-hover: #fa520f; --eyebrow: #cc3a05; --shadow: rgba(0, 0, 0, 0.04); /* Buttons */ --btn-primary-bg: #cc3a05; --btn-primary-bg-hover: #fa520f; --btn-primary-text: #ffffff; --btn-contrast-bg: #1f1f1f; /* "dark" button in light mode, light button in dark mode */ --btn-contrast-bg-hover: #3d3d3d; --btn-contrast-text: #ffffff; --btn-outline-border: #c7c7c7; --btn-outline-border-hover: #1f1f1f; --badge-bg: #cc3a05; --badge-text: #ffffff; --footer-bg: #141414; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); } img, picture { display: block; max-width: 100%; height: auto; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--link-hover); } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0 0 16px; letter-spacing: 0.005em; color: var(--text); } h1 { font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.005em; } h2 { font-size: clamp(32px, 4.5vw, 48px); } h3 { font-size: 26px; margin-bottom: 8px; } p { margin: 0 0 16px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; } .lead { font-size: 18px; line-height: 1.5; color: var(--text-soft); max-width: 56ch; } /* Skip link */ .skip-link { position: absolute; left: 8px; top: -60px; background: var(--btn-contrast-bg); color: var(--btn-contrast-text); padding: 8px 12px; border-radius: var(--r-md); z-index: 100; } .skip-link:focus { top: 8px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.3; padding: 12px 20px; border-radius: var(--r-md); border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .btn:focus-visible { outline: 3px solid var(--sunshine-500); outline-offset: 2px; } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .btn-primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); } .btn-dark { background: var(--btn-contrast-bg); color: var(--btn-contrast-text); } .btn-dark:hover { background: var(--btn-contrast-bg-hover); color: var(--btn-contrast-text); } .btn-secondary { background: transparent; color: var(--text); border-color: var(--btn-outline-border); } .btn-secondary:hover { border-color: var(--btn-outline-border-hover); color: var(--text); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; padding-top: 10px; padding-bottom: 10px; } .brand img { width: 240px; height: auto; } .logo-light { display: none; } :root[data-theme="light"] .logo-light { display: block; } :root[data-theme="light"] .logo-dark { display: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: var(--r-md); border: 1px solid var(--btn-outline-border); background: transparent; color: var(--text); cursor: pointer; transition: border-color 150ms ease, color 150ms ease; } .theme-toggle:hover { border-color: var(--btn-outline-border-hover); } .theme-toggle:focus-visible { outline: 3px solid var(--sunshine-500); outline-offset: 2px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } .site-nav { display: flex; gap: 24px; margin-left: auto; margin-right: 8px; } .site-nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; } .site-nav a:hover { border-bottom-color: var(--primary); color: var(--text); } .btn-phone { font-variant-numeric: tabular-nums; } /* Hero */ .hero { background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-warm-deep) 100%); border-bottom: 1px solid var(--border-warm); } .hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 72px; } .hero-copy h1 { max-width: 18ch; } .hero-photo { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--r-lg); object-fit: cover; } .placeholder { position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 80% 100%, rgba(204, 58, 5, 0.85) 0%, rgba(250, 82, 15, 0.7) 30%, rgba(255, 161, 16, 0.45) 55%, rgba(255, 217, 0, 0.15) 80%, transparent 100%), linear-gradient(160deg, #2a2a2a 0%, #141414 100%); border: 1px solid #000; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18); overflow: hidden; } .placeholder-sign { display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--font-display); font-weight: 600; color: var(--cream); text-transform: uppercase; letter-spacing: 0.08em; padding: 24px; } .placeholder-line { font-size: clamp(16px, 2vw, 22px); line-height: 1.3; } .placeholder-line.big { font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: 0.02em; color: #fff; } .placeholder-note { position: absolute; left: 16px; bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.3px; color: rgba(255, 248, 224, 0.75); } /* Sections */ section { padding: 96px 0; } .section-head { max-width: 62ch; margin-bottom: 40px; } .section-intro { font-size: 17px; color: var(--text-soft); } /* Supplies */ .card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 28px 20px; box-shadow: 0 4px 12px var(--shadow); } .card p { color: var(--text-muted); font-size: 15px; margin-bottom: 0; } .card h3 { position: relative; padding-top: 14px; } .card h3::before { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--primary) 0%, var(--yellow) 100%); } .card-featured { grid-column: span 2; background: var(--bg-warm-deep); border: 2px solid var(--primary); } .card-featured h3::before { display: none; } .card-featured h3 { padding-top: 0; } .card-featured p { color: var(--text-soft); max-width: 70ch; } .card-featured .badge { color: var(--badge-text); } .badge { display: inline-block; background: var(--badge-bg); color: var(--badge-text); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; } /* About */ .about { background: var(--bg-warm); border-top: 1px solid var(--border-warm); border-bottom: 1px solid var(--border-warm); } .about-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; } .about .eyebrow, .contact .eyebrow { margin-bottom: 12px; } .about-copy p { max-width: 58ch; color: var(--text-soft); font-size: 17px; } .fact-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border-warm); border-radius: var(--r-lg); } .fact-list li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--border); } .fact-list li:last-child { border-bottom: 0; } .fact-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; } .fact-value { font-weight: 500; } /* Contact */ .contact-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } address { font-style: normal; margin: 24px 0; } .contact-row { display: grid; grid-template-columns: 84px 1fr; gap: 16px; margin-bottom: 14px; } .contact-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; } .hours { border-collapse: collapse; width: 100%; max-width: 420px; margin-bottom: 8px; } .hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--border-mid); font-weight: 400; } .hours th { color: var(--text); font-weight: 500; padding-right: 24px; } .map-wrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 4px 12px var(--shadow); background: var(--surface-muted); } .map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; } /* Google's embed has no dark theme; invert it so it doesn't glare. */ :root:not([data-theme="light"]) .map-wrap iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.8); } /* Sunset stripe and footer */ .sunset-stripe { height: 24px; background: linear-gradient(90deg, var(--primary) 0%, var(--sunshine-700) 35%, var(--sunshine-500) 55%, var(--yellow) 78%, var(--cream) 100%); } .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 48px 0; } .footer-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .footer-inner img { width: 220px; height: auto; } .footer-text p { margin-bottom: 8px; font-size: 14px; } .footer-text a { color: #fff; } .footer-text a:hover { color: var(--sunshine-500); } .footer-fine { color: var(--footer-fine); font-size: 13px; } /* Responsive */ @media (max-width: 960px) { .hero-inner, .about-inner, .contact-inner { grid-template-columns: 1fr; gap: 40px; } .hero-inner { padding-top: 56px; padding-bottom: 56px; } section { padding: 72px 0; } } @media (max-width: 700px) { .card-featured { grid-column: 1 / -1; } .site-nav { display: none; } .header-inner { gap: 12px; } .brand img { width: 180px; } .theme-toggle { margin-left: auto; } .btn-phone { padding: 10px 14px; } .btn-phone span { display: none; } .btn-phone svg { width: 20px; height: 20px; } .fact-list li, .contact-row { grid-template-columns: 1fr; gap: 4px; } section { padding: 56px 0; } .card { padding: 24px 22px 18px; } }