/* ============================================================ Woody's Apple Pressing — Main Stylesheet ============================================================ HOW TO CUSTOMISE THIS FILE -------------------------- 1. COLOURS — Edit the values inside :root {} below. Every colour on the site flows from there. 2. FONTS — Loaded via Google Fonts in each HTML . Change the font-family values in :root to swap. 3. SIZES — The base font size (html { font-size: ... }) controls the scale of everything on the page. ============================================================ */ /* ---- Reset & base ---------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 18px; /* Base size — raise this to make everything bigger */ scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--brown-dark); background-color: var(--cream); line-height: 1.75; } img { max-width: 100%; height: auto; display: block; } ul, ol { padding-left: 1.5rem; } li { margin-bottom: 0.4em; } p { margin-bottom: 1.1em; } p:last-child { margin-bottom: 0; } /* ---- Design tokens (change these to restyle the whole site) */ :root { /* --- Colours --- */ --cream: #faf6ef; /* Main page background */ --tan: #f0e4c8; /* Alternate section background */ --tan-dark: #e0cfa0; /* Darker tan, used for borders */ --border: #c4a06a; /* Card and image borders */ --brown-dark: #2a1a0e; /* Main body text */ --brown-mid: #6b4a36; /* Secondary / muted text */ --brown-light: #a07850; /* Very light accent text */ --green-dark: #7a7a35; /* Header, primary accent */ --green-mid: #8e8e45; /* Hover states on green elements */ --green-light: #c8c87a; /* Light text on dark green bg */ --amber: #a08828; /* Primary call-to-action colour */ --amber-light: #d4b040; /* Lighter amber — logo, accents */ --white: #ffffff; --red-warn: #8b1a0e; /* Used for "don't" rules list */ /* --- Fonts --- */ --font-heading: 'Rye', Georgia, 'Times New Roman', serif; --font-body: 'Lora', Georgia, 'Times New Roman', serif; /* --- Spacing scale --- */ --gap-xs: 0.5rem; --gap-sm: 1rem; --gap-md: 1.75rem; --gap-lg: 2.5rem; --gap-xl: 4rem; /* --- Layout --- */ --max-width: 1100px; --pad: 1.5rem; /* Horizontal padding inside the container */ } /* ---- Typography ------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--green-dark); } h1 { font-size: 2.75rem; } h2 { font-size: 2rem; } h3 { font-size: 1.45rem; } h4 { font-size: 1.2rem; } a { color: var(--green-dark); text-decoration: underline; } a:hover, a:focus { color: var(--amber); } a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; } /* ---- Layout utilities ------------------------------------ */ .container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--pad); } .section-cream { position: relative; overflow: hidden; } .section-cream::before { content: ''; position: absolute; inset: 0; background-color: var(--cream); z-index: -2; } .section-tan { background-color: var(--tan); } /* ---- Decorative section illustrations -------------------- */ .deco-svg { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0.17; pointer-events: none; user-select: none; z-index: 0; } .deco-svg--left { left: 0; } .deco-svg--right { right: 0; } /* Ensure section content sits above illustrations */ .section-cream > .container { position: relative; z-index: 1; } @media (max-width: 700px) { .deco-svg { display: none; } } /* Decorative sketch strips — flex column of alternating images */ .deco-strip { position: absolute; top: 0; bottom: 0; width: 300px; display: flex; flex-direction: column; gap: 24px; opacity: 0.27; pointer-events: none; user-select: none; z-index: -1; } .deco-strip--left { left: -75px; } .deco-strip--right { right: -75px; } .deco-strip img { width: 100%; height: auto; flex-shrink: 0; display: block; clip-path: inset(0 15% 12% 0); } @media (max-width: 700px) { .deco-strip { display: none; } } section { padding-block: var(--gap-xl); } /* Section headings with amber underline rule */ .section-header { text-align: center; margin-bottom: var(--gap-lg); } .section-header h2 { margin-bottom: var(--gap-xs); } .section-header p { color: var(--brown-mid); font-size: 1.05rem; max-width: 620px; margin-inline: auto; margin-top: 0.5rem; } .section-header::after { content: ''; display: block; width: 56px; height: 3px; background-color: var(--amber); margin: var(--gap-sm) auto 0; } /* ---- Buttons --------------------------------------------- */ .btn { display: inline-block; padding: 0.85rem 2rem; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; text-decoration: none; border: 3px solid transparent; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; line-height: 1.2; } .btn:focus-visible { outline: 3px solid var(--amber-light); outline-offset: 3px; } .btn-primary { background-color: var(--amber); color: var(--white); border-color: var(--amber); } .btn-primary:hover { background-color: #8a5500; border-color: #8a5500; color: var(--white); } .btn-green { background-color: var(--green-dark); color: var(--white); border-color: var(--green-dark); } .btn-green:hover { background-color: var(--green-mid); border-color: var(--green-mid); color: var(--white); } .btn-outline-light { background-color: transparent; color: var(--cream); border-color: var(--cream); } .btn-outline-light:hover { background-color: var(--cream); color: var(--green-dark); } /* ---- Site header & navigation ---------------------------- */ .site-header { background-color: var(--green-dark); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .header-inner { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--pad); padding-block: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); flex-wrap: wrap; } /* Logo mark */ .site-logo { text-decoration: none; display: block; flex-shrink: 0; } .site-logo-img { height: 90px; width: 90px; object-fit: contain; display: block; border-radius: 50%; transition: opacity 0.2s ease; } .site-logo:hover .site-logo-img, .site-logo:focus-visible .site-logo-img { opacity: 0.85; } /* Navigation links */ .site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; } .site-nav a { display: inline-block; padding: 0.55rem 0.9rem; font-size: 0.95rem; font-weight: 600; color: var(--cream); text-decoration: none; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; white-space: nowrap; } .site-nav a:hover, .site-nav a:focus-visible { background-color: var(--green-mid); color: var(--white); outline: none; } /* Active / current page indicator — set by main.js */ .site-nav a.active { background-color: var(--amber); color: var(--white); } /* ---- Home hero ------------------------------------------- */ .home-hero { position: relative; z-index: 1; min-height: 540px; display: flex; align-items: center; background-color: var(--brown-dark); overflow: hidden; text-align: center; } /* Background photo */ .home-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Dark overlay so white text stays readable */ .home-hero::after { content: ''; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.38); z-index: 1; } .home-hero-content { position: relative; z-index: 2; max-width: var(--max-width); margin-inline: auto; padding: var(--gap-xl) var(--pad); } .home-hero h1 { color: var(--amber-light); font-size: 3.2rem; margin-bottom: var(--gap-md); text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.5); max-width: 680px; margin-inline: auto; } .home-hero p { color: var(--cream); font-size: 1.2rem; max-width: 580px; margin-bottom: var(--gap-lg); text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); margin-inline: auto; } .hero-cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; justify-content: center; } /* ---- Interior page hero (About, How It Works, etc.) ------ */ .page-hero { background-color: var(--tan); border-bottom: 3px solid var(--border); padding: var(--gap-xl) var(--pad); text-align: center; } .page-hero h1 { font-size: 2.6rem; margin-bottom: var(--gap-sm); } .page-hero p { color: var(--brown-mid); font-size: 1.1rem; max-width: 620px; margin-inline: auto; } /* ---- Feature cards (Home "What we do" grid) -------------- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-lg); } .feature-card { background-color: var(--white); border: 2px solid var(--border); border-radius: 6px; padding: var(--gap-lg); text-align: center; } .card-icon { font-size: 2.8rem; display: block; margin-bottom: var(--gap-sm); /* Prevents emoji from inheriting heading colour */ color: initial; } .feature-card h3 { margin-bottom: var(--gap-sm); } .feature-card p { color: var(--brown-mid); font-size: 1rem; } /* ---- CTA banner (green strip with call to action) -------- */ .cta-banner { position: relative; z-index: 1; background-color: var(--green-dark); padding: var(--gap-xl) var(--pad); text-align: center; } .cta-banner h2 { color: var(--amber-light); margin-bottom: var(--gap-sm); } .cta-banner p { color: var(--cream); font-size: 1.1rem; max-width: 580px; margin-inline: auto; margin-bottom: var(--gap-lg); } /* ---- Mid-page image banner ------------------------------- */ .image-banner { position: relative; z-index: 1; overflow: hidden; height: 300px; background-color: var(--brown-dark); } .image-banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; } .image-banner-caption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--pad); } .image-banner-caption h2 { color: var(--white); font-size: 2.4rem; text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.6); } /* ---- Two-column image + text (About page) ---------------- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: center; } .two-col img { border-radius: 6px; border: 3px solid var(--border); width: 100%; height: 380px; object-fit: cover; } /* Reverse the visual order on alternating rows */ .two-col.reverse { direction: rtl; } .two-col.reverse > * { direction: ltr; } /* ---- Values grid (About page) ---------------------------- */ .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gap-lg); } .value-card { border-left: 5px solid var(--amber); padding-left: var(--gap-md); } .value-card .card-icon { font-size: 2rem; display: block; margin-bottom: var(--gap-xs); color: initial; } .value-card h3 { margin-bottom: 0.5rem; } .value-card p { color: var(--brown-mid); font-size: 1rem; } /* ---- Team cards (About page) ----------------------------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-xl); } .team-card { text-align: center; } .team-card img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 4px solid var(--border); margin: 0 auto var(--gap-sm); } .team-card h3 { margin-bottom: 0.2rem; } .team-card .team-role { color: var(--amber); font-weight: 600; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--gap-sm); display: block; } .team-card p { color: var(--brown-mid); font-size: 0.97rem; } /* ---- Numbered steps (How It Works page) ------------------ */ .steps { list-style: none; padding: 0; max-width: 780px; margin-inline: auto; } .step { display: flex; gap: var(--gap-lg); margin-bottom: var(--gap-xl); align-items: flex-start; } .step:last-child { margin-bottom: 0; } .step-num { flex-shrink: 0; width: 68px; height: 68px; background-color: var(--green-dark); color: var(--white); font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; border-radius: 50%; border: 3px solid var(--amber); display: flex; align-items: center; justify-content: center; } .step-body h3 { margin-bottom: 0.4rem; font-size: 1.35rem; } .step-body p { color: var(--brown-mid); font-size: 1rem; } /* Tip box (highlighted note on How It Works page) */ .tip-box { max-width: 780px; margin-inline: auto; margin-top: var(--gap-xl); background-color: var(--tan); border-left: 5px solid var(--green-dark); padding: var(--gap-md); border-radius: 0 4px 4px 0; font-size: 1rem; } .tip-box strong { display: block; margin-bottom: 0.4em; color: var(--green-dark); } /* ---- Gallery grid ---------------------------------------- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .gallery-item { border: 2px solid var(--border); border-radius: 6px; overflow: hidden; background-color: var(--tan); } .gallery-item img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.35s ease; } /* Slight zoom on hover — subtle enough not to be alarming */ .gallery-item:hover img, .gallery-item:focus-within img { transform: scale(1.04); } .gallery-caption { padding: 0.6rem 0.9rem; font-size: 0.9rem; color: var(--brown-mid); font-style: italic; } .gallery-placeholder { width: 100%; height: 220px; background-color: var(--cream); border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--brown-mid); font-family: var(--font-body); font-size: 0.9rem; font-style: italic; } /* ---- Rules page ------------------------------------------ */ .rules-content { max-width: 780px; margin-inline: auto; } .rules-block { margin-bottom: var(--gap-xl); } .rules-block:last-child { margin-bottom: 0; } .rules-block h2 { font-size: 1.65rem; margin-bottom: var(--gap-md); padding-bottom: var(--gap-xs); border-bottom: 3px solid var(--amber); display: inline-block; } /* Tick-list (green checkmarks) */ .checklist { list-style: none; padding: 0; } .checklist li { position: relative; padding: 0.7rem 0.9rem 0.7rem 2.8rem; margin-bottom: 0.5rem; background-color: var(--white); border: 1px solid var(--border); border-radius: 4px; font-size: 1rem; line-height: 1.5; } .checklist li::before { content: '✓'; position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--green-mid); font-weight: 700; font-size: 1.1rem; } /* Cross-list (red X marks — "don't do this") */ .checklist.dont li::before { content: '✗'; color: var(--red-warn); } /* Highlighted notice box */ .notice-box { background-color: var(--tan); border-left: 5px solid var(--amber); padding: var(--gap-md); border-radius: 0 4px 4px 0; margin-top: var(--gap-md); font-size: 1rem; } .notice-box strong { display: block; margin-bottom: 0.4em; color: var(--brown-dark); font-size: 1.05rem; } /* ---- Contact page ---------------------------------------- */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gap-lg); max-width: 900px; margin-inline: auto; margin-bottom: var(--gap-xl); } .contact-card { background-color: var(--white); border: 2px solid var(--border); border-radius: 6px; padding: var(--gap-lg); text-align: center; } .contact-card .card-icon { font-size: 2.5rem; display: block; margin-bottom: var(--gap-sm); color: initial; } .contact-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .contact-card .contact-detail { font-size: 1.3rem; font-weight: 700; color: var(--green-dark); word-break: break-all; text-decoration: none; } .contact-card .contact-detail:hover { color: var(--amber); } .contact-card p { color: var(--brown-mid); font-size: 0.97rem; margin-top: 0.4rem; } /* Opening hours table */ .hours-section { max-width: 560px; margin-inline: auto; } .hours-section h2 { text-align: center; margin-bottom: var(--gap-md); } .hours-table { width: 100%; border-collapse: collapse; font-size: 1rem; } .hours-table th, .hours-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } .hours-table th { background-color: var(--green-dark); color: var(--cream); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; } .hours-table td:last-child { text-align: right; font-weight: 600; } .hours-table tr:nth-child(even) td { background-color: var(--tan); } .hours-table tr:nth-child(odd) td { background-color: var(--white); } /* ---- Footer ---------------------------------------------- */ .site-footer { background-color: var(--brown-dark); color: var(--cream); padding: var(--gap-xl) var(--pad); text-align: center; } .footer-inner { max-width: var(--max-width); margin-inline: auto; } .footer-logo { font-family: var(--font-heading); font-size: 1.5rem; color: var(--amber-light); margin-bottom: var(--gap-xs); } .footer-tagline { font-size: 0.78rem; color: var(--brown-light); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--gap-md); } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem var(--gap-md); margin-bottom: var(--gap-md); } .footer-nav a { color: var(--tan-dark); text-decoration: none; font-size: 0.97rem; padding: 0.25rem 0.5rem; border-radius: 3px; transition: color 0.2s ease; } .footer-nav a:hover { color: var(--amber-light); } .footer-sep { border: none; border-top: 1px solid var(--brown-mid); margin: var(--gap-md) 0; } .footer-copy { font-size: 0.85rem; color: var(--brown-light); } /* ---- Page fade-in ---------------------------------------- */ main { position: relative; overflow: hidden; animation: pageFadeIn 0.35s ease-in; } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- Responsive ------------------------------------------ */ /* Tablet and below */ @media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } .two-col.reverse { direction: ltr; } .home-hero h1 { font-size: 2.6rem; } .image-banner { height: 220px; } .image-banner-caption h2 { font-size: 1.9rem; } } /* Mobile */ @media (max-width: 700px) { html { font-size: 17px; } h1 { font-size: 2.2rem; } h2 { font-size: 1.7rem; } .home-hero { min-height: 460px; } .home-hero h1 { font-size: 2.1rem; } .home-hero p { font-size: 1.1rem; } /* On small screens the nav wraps below the logo in a column */ .header-inner { flex-direction: column; align-items: flex-start; } .site-nav { width: 100%; } .site-nav a { padding: 0.5rem 0.75rem; font-size: 0.9rem; } /* Steps stack vertically on mobile */ .step { flex-direction: column; gap: var(--gap-sm); } section { padding-block: var(--gap-lg); } } /* Small mobile */ @media (max-width: 480px) { html { font-size: 16px; } .home-hero h1 { font-size: 1.9rem; } .page-hero h1 { font-size: 2rem; } .step-num { width: 56px; height: 56px; font-size: 1.6rem; } }