/* ========================================================================== BRADBURY PLANT — shared stylesheet Plain HTML5/CSS/JS build (no framework, no build step) for hosts that only accept static files. Fonts loaded via Google Fonts in each page's . Colours as CSS custom properties below. ========================================================================== */ :root { --grey: #4A5058; --charcoal: #383D42; --silver: #C9CDD1; --steel: #6B7280; --orange: #E8590C; --orange-hover: #c94e0a; --paper: #F3F2EE; --white: #ffffff; --line: rgba(0,0,0,0.10); --line-light: #F0EEE7; --line-mid: #E5E3DC; --muted: #8A8F94; --muted-2: #B9B6AC; --danger: #B4231A; --font-display: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--grey); background: var(--white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; } /* ---------------------------- layout ---------------------------- */ .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .inline-block { display: inline-block; } .hidden { display: none; } .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .top-0 { top: 0; } .top-24 { top: 6rem; } .bottom-1 { bottom: 0.25rem; } .right-1\.5 { right: 0.375rem; } .z-30 { z-index: 30; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .grid-cols-7 { grid-template-columns: repeat(7, minmax(0,1fr)); } .gap-0\.5 { gap: 0.125rem; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-7 { gap: 1.75rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .space-y-1 > * + * { margin-top: 0.25rem; } .w-full { width: 100%; } .w-3 { width: 0.75rem; } .h-3 { height: 0.75rem; } .h-32 { height: 8rem; } .h-full { height: 100%; } .aspect-square { aspect-ratio: 1 / 1; } .min-h-\[60vh\] { min-height: 60vh; } .min-h-\[70vh\] { min-height: 70vh; } .min-w-\[180px\] { min-width: 180px; } .max-h-64 { max-height: 16rem; } .max-h-80 { max-height: 20rem; } .max-w-xs { max-width: 20rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-6xl { max-width: 72rem; } .mx-auto { margin-left: auto; margin-right: auto; } .object-cover { object-fit: cover; } .select-none { user-select: none; } .whitespace-nowrap { white-space: nowrap; } /* ---------------------------- spacing ---------------------------- */ .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .px-1\.5 { padding-left: .375rem; padding-right: .375rem; } .px-2 { padding-left: .5rem; padding-right: .5rem; } .px-3 { padding-left: .75rem; padding-right: .75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; } .py-1 { padding-top: .25rem; padding-bottom: .25rem; } .py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } .py-3 { padding-top: .75rem; padding-bottom: .75rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .pt-2 { padding-top: .5rem; } .pt-3 { padding-top: .75rem; } .pt-4 { padding-top: 1rem; } .pt-20 { padding-top: 5rem; } .pb-1 { padding-bottom: .25rem; } .pb-3 { padding-bottom: .75rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-24 { padding-bottom: 6rem; } .pr-1 { padding-right: .25rem; } .ml-1 { margin-left: .25rem; } .-mt-1 { margin-top: -.25rem; } .mt-0\.5 { margin-top: .125rem; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-9 { margin-top: 2.25rem; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } /* ---------------------------- borders/radius ---------------------------- */ .border { border: 1px solid var(--line); } .border-t { border-top: 1px solid var(--line-light); } .border-t-2 { border-top: 2px solid var(--orange); } .border-b { border-bottom: 1px solid var(--line-light); } .border-dashed { border-style: dashed; } .border-black\/10 { border-color: var(--line); } .border-white\/10 { border-color: rgba(255,255,255,0.10); } .rounded-sm { border-radius: 3px; } /* ---------------------------- typography ---------------------------- */ .text-\[9px\] { font-size: 9px; } .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .text-5xl { font-size: 3rem; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .tracking-tight { letter-spacing: -0.02em; } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-\[0\.25em\] { letter-spacing: 0.25em; } .line-through { text-decoration: line-through; } .text-gray-500 { color: #6b7280; } /* ---------------------------- colour ---------------------------- */ .bg-white { background: var(--white); } /* ---------------------------- responsive ---------------------------- */ @media (min-width: 640px) { .sm\:inline { display: inline; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .sm\:col-span-2 { grid-column: span 2 / span 2; } .sm\:text-6xl { font-size: 3.75rem; } } @media (min-width: 768px) { .md\:flex { display: flex; } .md\:hidden { display: none; } } @media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); } .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-span-3 { grid-column: span 3 / span 3; } } /* ---------------------------- shared components ---------------------------- */ .dash { display: inline-block; height: 3px; background: var(--orange); border-radius: 2px; } .logo-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; } .logo-sub { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.35em; color: var(--orange); } .btn { font-family: var(--font-body); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; border: none; border-radius: 0; transition: background-color .15s ease, opacity .15s ease; } .btn-solid { background: var(--orange); color: #fff; } .btn-solid:hover:not(:disabled) { background: var(--orange-hover); } .btn-outline { background: transparent; color: var(--paper); border: 1px solid #4B4F54; } .btn-dark { background: var(--grey); color: #fff; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .fleet-tag { display: inline-block; padding: 0.125rem 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; border-radius: 3px; background: var(--grey); color: var(--paper); } input[type=text], input[type=tel], input[type=email], input[type=number], input[type=password], input[type=date], select, textarea { border: 1px solid var(--line); border-radius: 3px; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: var(--font-body); background: #fff; width: 100%; } nav a.nav-link { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; padding-bottom: 0.25rem; border-bottom: 2px solid transparent; color: var(--silver); } nav a.nav-link.active { color: var(--orange); border-color: var(--orange); }