/* ========================================================== Walking In The Sun Rescue ─ master stylesheet ---------------------------------------------------------- 1. CSS Custom-properties (brand palette & fonts) 2. Reset / base element defaults 3. Global type & helpers 4. Layout: header + navigation 5. Hero banner 6. Buttons & links 7. Card grid & utilities 8. Forms 9. Footer 10. Media queries ========================================================== */ /* ─────────────────────────────────────────────────────────── 1. Theme variables ─────────────────────────────────────────────────────────── */ :root { /* Brand colours pulled from the logo */ --sky: #0099ff; /* Caribbean Blue */ --halo: #00d964; /* Lime Green */ --sun: #ffcd00; /* Solar Yellow */ --glow: #ff9900; /* Sunburst Orange */ --purple: #7f2da6; /* Rescue Purple */ --black: #000000; /* Webfonts (loaded via in ) */ --font-head: 'Montserrat', sans-serif; --font-body: 'Open Sans', sans-serif; } /* ─────────────────────────────────────────────────────────── 2. Reset & base element defaults ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--black); background: #fdfdfd; line-height: 1.55; } img { display: block; max-width: 100%; height: auto; } /* ─────────────────────────────────────────────────────────── 3. Global type & helper classes ─────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); margin: 0 0 .5em; } h2, h3 { color: var(--purple); } section { padding: 4rem 2rem; } blockquote { border-left: 6px solid var(--halo); padding: .5rem 1rem; font-style: italic; background: #f8fff8; margin: 2rem 0; } .paw-bullet::before { content: "🐾"; margin-right: .35rem; color: var(--glow); } /* ─────────────────────────────────────────────────────────── 4. Header / Navigation ─────────────────────────────────────────────────────────── */ header { display: flex; flex-direction: column; /* logo above nav on narrow screens */ align-items: center; gap: .5rem; } header img { /* site badge / logo */ max-width: 180px; } .site-header { /* coloured bar behind logo & nav */ width: 100%; background: var(--sky); padding: .5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; } /* ----- Primary Navigation ----- */ nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; } nav a { color: #fff; text-decoration: none; font-weight: 600; } /* ─────────────────────────────────────────────────────────── 5. Hero banner ─────────────────────────────────────────────────────────── */ .hero { background: url("../images/hero-banner-v2.png") center/cover no-repeat; min-height: 420px; } /* ─────────────────────────────────────────────────────────── 6. Buttons & action links ─────────────────────────────────────────────────────────── */ .btn { display: inline-block; background: var(--purple); color: #fff; padding: 0.75rem 1.5rem; border-radius: 4px; text-decoration: none; font-weight: 600; transition: background .2s ease; } .btn:hover, .btn:focus { background: var(--glow); } /* ─────────────────────────────────────────────────────────── 7. Card grid ─────────────────────────────────────────────────────────── */ .cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #fff; } .card img { width: 100%; height: 600px; object-fit: cover; display: block; } .card-body { padding: 1rem; } /* ─────────────────────────────────────────────────────────── 8. Forms ─────────────────────────────────────────────────────────── */ form { max-width: 800px; margin: 0 auto; display: grid; gap: 1rem; } fieldset { border: 1px solid rgba(0,0,0,.15); padding: 1rem; margin: 1rem 0; } input, select, textarea { width: 100%; padding: .6rem; font: inherit; } label { display: block; margin: .75rem 0 .25rem; font-weight: 600; } /* ─────────────────────────────────────────────────────────── 9. Footer ─────────────────────────────────────────────────────────── */ footer { background: var(--sky); color: #fff; text-align: center; padding: 2rem; margin-top: 4rem; } /* ─────────────────────────────────────────────────────────── 10. Media queries ─────────────────────────────────────────────────────────── */ @media (max-width: 600px) { nav a { font-size: .9rem; } }