/*! * Spanish Highs Mountain Guides — Design System * Version: 2027.1.0 * * Version-controlled source CSS. Load after Tailwind utilities. * Brand palette: forest green, saffron, cream, warm orange, charcoal. * Themes: light (default) and .dark on , with prefers-color-scheme fallback. */ /* -------------------------------------------------------------------------- */ /* 1. Tokens */ /* -------------------------------------------------------------------------- */ :root { --brand-green: #1b9947; --brand-green-hover: #157a38; --brand-green-soft: #e7f6ec; --brand-saffron: #f9c72d; --brand-orange: #ed602b; --brand-orange-hover: #d14e1d; --brand-charcoal: #282828; --color-bg: #f6f2ec; --color-bg-elevated: #ffffff; --color-bg-muted: #fbf5f5; --color-bg-hero: #eef4ef; --color-text: #1c1c1a; --color-text-muted: #5c5c56; --color-heading: #17261c; --color-border: #e4ddd4; --color-border-strong: #cfc6ba; --color-link: var(--brand-green); --color-link-hover: var(--brand-green-hover); --color-focus: var(--brand-green); --color-nav: #1a2420; --color-nav-text: #e8ede9; --color-nav-muted: #a8b3ad; --color-nav-hover: #ffffff; --color-footer: #161d1a; --color-footer-text: #c5cdc8; --color-overlay: rgba(22, 29, 26, 0.55); --color-shadow: rgba(24, 28, 24, 0.08); --color-shadow-strong: rgba(24, 28, 24, 0.16); --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: clamp(1.5rem, 2.4vw, 2rem); --text-3xl: clamp(1.75rem, 3.2vw, 2.5rem); --text-4xl: clamp(2rem, 4.5vw, 3.25rem); --leading-body: 1.7; --leading-heading: 1.2; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-full: 9999px; --shadow-sm: 0 1px 2px var(--color-shadow); --shadow-md: 0 8px 24px var(--color-shadow); --shadow-lg: 0 16px 40px var(--color-shadow-strong); --nav-height: 4rem; --content-width: 72rem; --measure: 68ch; --ease: 180ms ease; --color-scheme: light; color-scheme: var(--color-scheme); } html.dark { --brand-green: #3cb86a; --brand-green-hover: #5fd489; --brand-green-soft: #1b3324; --brand-saffron: #f9c72d; --brand-orange: #f07540; --brand-orange-hover: #ff8a58; --color-bg: #121614; --color-bg-elevated: #1b221e; --color-bg-muted: #222a25; --color-bg-hero: #171d1a; --color-text: #f2efe9; --color-text-muted: #a9afa8; --color-heading: #f7f4ef; --color-border: #2e3832; --color-border-strong: #445048; --color-link: #4ecb78; --color-link-hover: #f9c72d; --color-focus: #4ecb78; --color-nav: #101412; --color-nav-text: #e8ede9; --color-nav-muted: #8f9b94; --color-nav-hover: #ffffff; --color-footer: #0e1210; --color-footer-text: #b8c0bb; --color-overlay: rgba(8, 10, 9, 0.7); --color-shadow: rgba(0, 0, 0, 0.35); --color-shadow-strong: rgba(0, 0, 0, 0.5); --color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { --brand-green: #3cb86a; --brand-green-hover: #5fd489; --brand-green-soft: #1b3324; --color-bg: #121614; --color-bg-elevated: #1b221e; --color-bg-muted: #222a25; --color-bg-hero: #171d1a; --color-text: #f2efe9; --color-text-muted: #a9afa8; --color-heading: #f7f4ef; --color-border: #2e3832; --color-border-strong: #445048; --color-link: #4ecb78; --color-link-hover: #f9c72d; --color-focus: #4ecb78; --color-nav: #101412; --color-nav-text: #e8ede9; --color-nav-muted: #8f9b94; --color-footer: #0e1210; --color-footer-text: #b8c0bb; --color-shadow: rgba(0, 0, 0, 0.35); --color-shadow-strong: rgba(0, 0, 0, 0.5); --color-scheme: dark; } } /* -------------------------------------------------------------------------- */ /* 2. Base */ /* -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body, .site-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); color: var(--color-text); background: var(--color-bg); transition: background-color 220ms ease, color 220ms ease; } [x-cloak] { display: none !important; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } ::selection { background: var(--brand-saffron); color: var(--brand-charcoal); } img, video, iframe { max-width: 100%; height: auto; } main img, .site-content img { border-radius: var(--radius-md); } p { margin: 0 0 1.15em; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: var(--leading-heading); letter-spacing: -0.02em; color: var(--color-heading); text-wrap: balance; } h1 { font-size: var(--text-4xl); margin: 0 0 0.4em; } h2 { font-size: var(--text-2xl); margin: 1.6em 0 0.55em; } h3 { font-size: var(--text-xl); margin: 1.4em 0 0.5em; text-align: inherit; font-weight: 600; } h4 { font-size: var(--text-lg); margin: 1.2em 0 0.4em; color: var(--color-text-muted); text-transform: none; } h5 { font-size: var(--text-md); margin: 1em 0 0.35em; text-transform: none; } ul { margin: 0 0 1.25em; padding-left: 1.25em; } a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--ease); } a:hover { color: var(--color-link-hover); } hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-lg) 0; } table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-sm); background: var(--color-bg-elevated); border-radius: var(--radius-md); overflow: hidden; } thead th { background: var(--color-bg-muted); color: var(--color-heading); font-weight: 600; } th, td { border: 1px solid var(--color-border); padding: 0.7rem 0.9rem; vertical-align: top; } tbody tr:hover { background: var(--color-bg-hero); } .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- */ /* 3. Layout — header, page hero, main, footer */ /* -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--nav-height); background: var(--color-nav); color: var(--color-nav-text); border-bottom: 1px solid color-mix(in srgb, var(--brand-green) 45%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--brand-saffron) 35%, transparent); } .site-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--brand-green), var(--brand-saffron) 55%, var(--brand-orange)); } .site-nav { max-width: 80rem; height: 100%; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .site-nav { padding: 0 1.5rem; } } .site-nav__bar { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; } .site-nav__logo img { height: 2.5rem; width: auto; display: block; } @media (min-width: 640px) { .site-nav__logo img { height: 2.75rem; } } .site-nav__links { display: none; align-items: center; gap: 0.15rem; } @media (min-width: 1024px) { .site-nav__links { display: flex; } } @media (min-width: 1024px) and (max-width: 1279px) { .site-nav__links { gap: 0; } .site-nav__links > a, .site-nav__drop > button { padding: 0.4rem 0.45rem; font-size: 0.8rem; } } .site-nav__links > a, .site-nav__drop > button { color: var(--color-nav-text); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); text-decoration: none; background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: background-color var(--ease), color var(--ease); } .site-nav__links > a:hover, .site-nav__drop > button:hover { color: var(--color-nav-hover); background: color-mix(in srgb, white 8%, transparent); } .site-nav__drop { position: relative; } .site-nav__drop > button { display: inline-flex; align-items: center; gap: 0.2rem; } .site-nav__menu { position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 16rem; padding: 0.4rem 0; background: var(--color-nav); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--ease), transform var(--ease), visibility var(--ease); z-index: 60; } .site-nav__drop:hover .site-nav__menu, .site-nav__drop:focus-within .site-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__menu a { display: block; padding: 0.6rem 1rem; color: var(--color-nav-text); font-size: 0.875rem; text-decoration: none; } .site-nav__menu a:hover { background: color-mix(in srgb, white 8%, transparent); color: #fff; } .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--color-nav-text); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; } @media (min-width: 1024px) { .site-nav__toggle { display: none; } } .site-nav__mobile { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; z-index: 60; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--color-nav); } .site-nav__mobile.is-open, .site-nav__mobile:not(.hidden) { display: block; } .site-nav__mobile-inner { padding: 0.75rem 1rem 2rem; display: flex; flex-direction: column; gap: 0.15rem; } .site-nav__mobile a { display: block; padding: 0.85rem 1rem; color: var(--color-nav-text); font-size: 1.05rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: var(--radius-sm); } .site-nav__mobile a:hover { background: color-mix(in srgb, white 8%, transparent); color: #fff; } .site-nav__label { margin: 1rem 0.5rem 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-nav-muted); text-align: center; } .site-nav__theme-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem; border-top: 1px solid color-mix(in srgb, white 12%, transparent); color: var(--color-nav-text); font-size: 0.95rem; } .page-hero { padding: 2.25rem 1.25rem 1.5rem; text-align: center; background: radial-gradient(1200px 280px at 50% -40%, color-mix(in srgb, var(--brand-green) 16%, transparent), transparent 70%), var(--color-bg-hero); } .page-hero h1, .page-title { margin: 0 auto 0.45em; max-width: 22ch; font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.03em; color: var(--color-heading); text-align: center; } .page-hero h2, .page-subtitle { margin: 0 auto; max-width: 36rem; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 450; line-height: 1.45; color: var(--color-text-muted); text-align: center; } .page-hero--article { padding-bottom: 2rem; } .page-banner { width: 100%; margin: 0 0 var(--space-lg); } .page-banner img { width: 100%; height: auto; display: block; border-radius: 0; } .page-banner--contained { max-width: var(--content-width); margin-inline: auto; padding-inline: 0.5rem; } .page-banner--contained img { border-radius: var(--radius-lg); } .site-main { flex: 1 0 auto; width: 100%; background: transparent; } .site-content { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0.5rem 1rem 3.5rem; color: var(--color-text); background: transparent; } @media (min-width: 768px) { .site-content { padding: 0.5rem 1.5rem 4rem; } } .site-footer { margin-top: auto; padding: 3rem 1.25rem 2rem; background: var(--color-footer); color: var(--color-footer-text); text-align: center; } .site-footer a { color: #e8ede9; text-decoration: none; } .site-footer a:hover { color: var(--brand-saffron); } .site-footer__privacy { max-width: 40rem; margin: 0 auto 2rem; font-size: var(--text-sm); line-height: 1.6; } .site-footer__heading { margin: 1.5rem 0 0.25rem; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-saffron); } .site-footer__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.5rem; margin: 0.5rem 0 0.25rem; } .site-footer__row > * { padding: 0.65rem 0.9rem; } .site-footer__legal { margin-top: 2rem; font-size: 0.8rem; color: var(--color-nav-muted); } /* -------------------------------------------------------------------------- */ /* 4. Theme toggle */ /* -------------------------------------------------------------------------- */ .dark-mode-toggle { position: relative; display: inline-flex; align-items: center; width: 2.75rem; height: 1.55rem; padding: 0; border: 0; border-radius: var(--radius-full); background: color-mix(in srgb, white 22%, transparent); cursor: pointer; transition: background-color var(--ease); } .dark-mode-toggle.active { background: var(--brand-green); } .dark-mode-toggle:focus-visible { outline: 2px solid var(--brand-saffron); outline-offset: 3px; } .dark-mode-toggle-handle { display: block; width: 1.15rem; height: 1.15rem; margin-left: 0.2rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: transform var(--ease); } .dark-mode-toggle.active .dark-mode-toggle-handle { transform: translateX(1.15rem); } .site-nav__links .dark-mode-toggle { margin-left: 0.5rem; } /* -------------------------------------------------------------------------- */ /* 5. Buttons */ /* -------------------------------------------------------------------------- */ .button { padding: 0.5rem 0 2rem; } [class^="btn-"], [class*=" btn-"], a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1.2rem; margin: 0 0.4rem 0.5rem 0; border: 0; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; text-decoration: none; color: #fff; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--ease), filter var(--ease), background-color var(--ease), box-shadow var(--ease); } [class^="btn-"]:hover, [class*=" btn-"]:hover, a.btn:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); } .btn-blue { background: #1d6fbf; } .btn-blue:hover { background: #155a9c; color: #fff; } .btn-green, .btn-success { background: var(--brand-green); } .btn-green:hover, .btn-success:hover { background: var(--brand-green-hover); color: #fff; } .btn-orange { background: var(--brand-orange); } .btn-orange:hover { background: var(--brand-orange-hover); color: #fff; } .btn-teal { background: #0f8c86; } .btn-teal:hover { background: #0b6e6a; color: #fff; } .btn-red { background: #c43c3c; } .btn-red:hover { background: #a32f2f; color: #fff; } .btn-gray { background: #5c6560; } .btn-gray:hover { background: #474f4b; color: #fff; } .btn-black { background: var(--brand-charcoal); } html.dark .btn-black { background: #0c0e0d; } /* -------------------------------------------------------------------------- */ /* 6. Cards, callouts, jumbotron */ /* -------------------------------------------------------------------------- */ .jumbotron { margin: 1.5rem 0; padding: 2.25rem 1.25rem; text-align: center; font-size: var(--text-lg); color: var(--color-heading); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-green) 12%, var(--color-bg-elevated)), var(--color-bg-muted) 55%, color-mix(in srgb, var(--brand-saffron) 18%, var(--color-bg-elevated))); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .jumbotron-header, .jumbotron h3 { margin: 0; font-size: var(--text-2xl); font-weight: 600; text-align: center; color: var(--color-heading); } .graybox, .borderbox { margin: 1.5rem 0; padding: 1.15rem 1.25rem; background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); } .section { margin: 1rem; border-radius: var(--radius-lg); } .alert-green { padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--brand-green-soft); color: var(--color-heading); } .quote-card, section .shadow-lg { border-radius: var(--radius-lg); border: 1px solid var(--color-border); } /* Outer testimonial wrapper (bg-white) was square; match the inner card */ .site-content > section:has(.shadow-lg), section.py-2.px-2.bg-white { border-radius: var(--radius-lg); } /* Alpine dropdowns */ div[x-data] { margin: 0.75rem 0; } div[x-data] > button { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 0.85rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-muted); color: var(--color-heading); } div[x-data] > button:hover { background: var(--color-bg-hero); } div[x-data] > [x-show] { margin-top: 0.5rem; padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text); box-shadow: var(--shadow-sm); } /* -------------------------------------------------------------------------- */ /* 7. Walk cards & grade badges */ /* -------------------------------------------------------------------------- */ .walk-card-container { display: flex; justify-content: center; margin: 1.25rem 0; } .walk-card { width: 100%; max-width: 26rem; padding: 1.35rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .walk-header { text-align: center; margin-bottom: 1rem; } .walk-title { font-size: 1.2rem; font-weight: 700; color: var(--color-heading); margin: 0 0 0.5rem; } .walk-badge { display: inline-block; padding: 0.3rem 0.85rem; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; color: #fff; } .walk-footer { text-align: center; padding-top: 0.6rem; border-top: 1px solid var(--color-border); } .walk-footer p { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); } .walk-stats-mobile, .walk-stats-desktop { background: var(--color-bg-muted) !important; box-shadow: none !important; } .grade-badge, .hike-grade-badge { display: inline-block; padding: 0.45rem 0.9rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-align: center; } .grade-badge { position: absolute; top: 0.85rem; right: 0.85rem; } .hike-grade-badge { margin: 0.75rem; } .grade-leisurely, .hike-grade-easy { background: var(--brand-green); } .grade-moderate, .hike-grade-moderate { background: var(--brand-saffron); color: #2a2410; } .grade-challenging, .hike-grade-challenging { background: #c43c3c; } .grade-tough, .hike-grade-tough { background: #6f42c1; } .grade-very-tough, .hike-grade-very-tough { background: var(--brand-charcoal); } /* -------------------------------------------------------------------------- */ /* 8. Media, galleries, photos */ /* -------------------------------------------------------------------------- */ .iframe-container { overflow: hidden; padding-top: 56.25%; position: relative; border-radius: var(--radius-lg); background: var(--color-bg-muted); } .iframe-container iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .immich-gallery { max-width: 56rem; margin: 1.5rem auto; } .photo-types .photo-type-img { width: min(16rem, 70vw); height: min(16rem, 70vw); border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 1rem; border: 4px solid var(--color-bg-elevated); box-shadow: var(--shadow-md); } .photo-types .photo-type-card { display: flex; flex-direction: column; align-items: center; } .mastodon-feed-container { margin-bottom: 3rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--color-bg-muted); border: 1px solid var(--color-border); } .article-preview-card { transition: transform var(--ease), box-shadow var(--ease); } .article-preview-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .article-preview-card .-mt-16 { margin-top: 0 !important; } .site-content > p.text-2xl, .site-content p.text-2xl:not([class*="text-center"]) { font-family: var(--font-heading); font-weight: 600; color: var(--color-heading); letter-spacing: -0.02em; margin-top: 1.75em; } .site-content .text-blue-900 { color: var(--brand-green); } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cardimage { border-radius: var(--radius-md); } .w3-button { border: none; display: inline-block; padding: 8px 16px; vertical-align: middle; overflow: hidden; text-decoration: none; color: inherit; background-color: inherit; text-align: center; cursor: pointer; white-space: nowrap; } .w3-display-container { position: relative; } .w3-display-left { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); } .w3-display-right { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } .show { display: inline-block !important; } .overflow-touch { -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- */ /* 9. Responsive */ /* -------------------------------------------------------------------------- */ @media (max-width: 640px) { .table-stack thead { display: none; } .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; } .table-stack tr { margin-bottom: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); } .table-stack td { padding: 0.65rem 1rem; border: 0; border-bottom: 1px solid var(--color-border); } .table-stack td:last-child { border-bottom: 0; } .table-stack td::before { content: attr(data-label); display: block; margin-bottom: 0.2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .table-stack td[data-label=""]::before { display: none; } .site-nav__links > a { padding: 0.45rem 0.5rem; font-size: 0.8rem; } } @media (max-width: 480px) { .page-hero { padding: 1.5rem 1rem 1.15rem; } .site-content { padding-inline: 0.85rem; } [class^="btn-"], [class*=" btn-"] { width: 100%; margin-right: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- */ /* 10. Dark-mode surfaces used by existing Tailwind markup */ /* -------------------------------------------------------------------------- */ html.dark .bg-white { background-color: var(--color-bg-elevated); } html.dark .bg-gray-50, html.dark .bg-slate-100 { background-color: var(--color-bg-muted); } html.dark .text-gray-800, html.dark .text-gray-900, html.dark .text-gray-700 { color: var(--color-heading); } html.dark .text-gray-500, html.dark .text-gray-600 { color: var(--color-text-muted); } html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--color-border); }