/* ========== CSS Reset / Base ========== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } /* ========== Theme ========== */ :root { /* Default "Inspire" green theme */ --color-bg: #ffffff; --color-surface: #f3f3f3; /* light grey panel */ --color-surface-alt: #244625; /* deep green for dark cards/blocks */ --color-primary: #8cc63f; /* main lime green */ --color-primary-soft: #c7de5b; /* soft light green */ --color-accent: #ffd93b; /* yellow accent (signage style) */ --color-text: #555555; /* main body text */ --color-muted: #777777; /* secondary text */ --color-border: #d8d8d8; --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.12); --radius-lg: 16px; --radius-full: 999px; --container-width: 1120px; } /* Gary theme – toggled via */ :root[data-theme="gary"] { /* Colour palette – tuned to feel like signage: bold purple + warm accent */ --color-bg: #ffffff; --color-surface: #f5f5f7; --color-surface-alt: #111827; --color-primary: #6b1f6f; /* deep purple */ --color-primary-soft: #8b3a90; --color-accent: #f97316; /* warm orange */ --color-text: #111827; --color-muted: #6b7280; --color-border: #e5e7eb; --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.14); --radius-lg: 16px; --radius-full: 999px; --container-width: 1120px; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--color-text); background: var(--color-bg); line-height: 1.6; } .header__logo-img { height: 120px; /* adjust as needed */ width: auto; display: block; } /* ========== Layout Helpers ========== */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; } .section { padding: 4rem 0; } .section--alt { background: var(--color-surface); } .section__heading { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; } .section__heading h2 { font-size: 2rem; margin-bottom: 0.75rem; } .section__heading p { color: var(--color-muted); } /* ========== Header & Navigation ========== */ .top-bar { background: linear-gradient( 90deg, var(--color-primary-soft) 0%, var(--color-primary) 40%, var(--color-accent) 100% ); color: #f9fafb; font-size: 0.9rem; } .top-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; } .top-bar__brand { font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.85rem; } .top-bar__contact { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; } .top-bar__contact a { display: inline-flex; align-items: center; gap: 0.35rem; color: #f9fafb; } .top-bar__contact span.icon { display: inline-block; font-size: 1rem; } /* Main header */ .header { position: sticky; top: 0; z-index: 100; background: #ffffff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); backdrop-filter: none; } .header__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; } .header__logo { display: flex; align-items: center; gap: 0.75rem; } .header__logo-mark { width: 38px; height: 38px; border-radius: 12px; background: radial-gradient( circle at 20% 0%, var(--color-primary-soft), var(--color-primary) ); display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-size: 1.1rem; } .header__logo-text { display: flex; flex-direction: column; } .header__logo-title { color: #333333; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9rem; } .header__logo-subtitle { color: #777777; font-size: 0.8rem; } /* Navigation */ .nav-toggle { display: none; } .nav-toggle-label { display: none; cursor: pointer; color: #111827; } .nav-toggle-label span { display: block; width: 22px; height: 2px; margin: 5px 0; background: #111827; border-radius: 999px; } .nav { display: flex; align-items: center; gap: 1.5rem; } .nav__list { list-style: none; display: flex; align-items: center; gap: 1.5rem; padding: 0; margin: 0; } .nav__item a { font-size: 0.95rem; color: #555555; position: relative; padding-bottom: 0.2rem; } .nav__item a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--color-primary), var(--color-primary-soft) ); transition: width 0.18s ease-out; } .nav__item a:hover::after, .nav__item a[aria-current="page"]::after { width: 100%; } .nav__item a[aria-current="page"] { color: var(--color-primary); } .nav__cta { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 0.45rem 1.1rem; font-size: 0.9rem; font-weight: 600; background: linear-gradient( 135deg, var(--color-primary-soft), var(--color-primary) ); color: #ffffff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); } /* ========== Hero ========== */ .hero { background: radial-gradient( circle at top left, var(--color-primary-soft) 0%, var(--color-primary) 45%, var(--color-surface-alt) 100% ); color: #f9fafb; padding: 4rem 0 4.5rem; } .hero__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr); gap: 3rem; align-items: center; } .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: #e5f3df; margin-bottom: 0.75rem; } .hero__title { font-size: clamp(2.3rem, 3vw, 3rem); line-height: 1.1; margin-bottom: 1rem; } .hero__title span { background: linear-gradient(120deg, #e9ffb0, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__text { color: #f0f5ec; max-width: 36rem; margin-bottom: 1.5rem; } .hero__badges { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem; } .badge { border-radius: var(--radius-full); border: 1px solid rgba(221, 237, 212, 0.75); padding: 0.35rem 0.9rem; font-size: 0.8rem; color: #e9f5df; display: inline-flex; align-items: center; gap: 0.45rem; } .badge__dot { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25); } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; } .btn { border-radius: var(--radius-full); padding: 0.8rem 1.6rem; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out; } .btn--primary { background: linear-gradient( 135deg, var(--color-primary-soft), var(--color-primary) ); color: #ffffff; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5); } .btn--ghost { background: rgba(17, 24, 39, 0.8); color: #f9fafb; border: 1px solid rgba(249, 250, 251, 0.3); } .btn--ghost:hover { transform: translateY(-1px); background: rgba(15, 23, 42, 0.95); } .hero__meta { margin-top: 1.75rem; font-size: 0.85rem; color: #e0edd8; } /* Hero visual */ .hero__visual { position: relative; } .hero-card { background: rgba(18, 47, 19, 0.92); border-radius: 24px; padding: 1.5rem; box-shadow: var(--shadow-soft); border: 1px solid rgba(196, 220, 185, 0.8); } .hero-card__tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #d7e7cf; margin-bottom: 0.6rem; } .hero-card__title { font-size: 1.1rem; margin-bottom: 0.75rem; } .hero-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .hero-card__stat { background: rgba(20, 53, 23, 0.95); border-radius: 12px; padding: 0.6rem 0.8rem; } .hero-card__stat-label { font-size: 0.75rem; color: #cde0c6; } .hero-card__stat-value { font-size: 1rem; font-weight: 600; } .hero-card__meter { height: 7px; border-radius: 999px; background: rgba(28, 65, 30, 0.95); overflow: hidden; margin-top: 6px; } .hero-card__meter-fill { height: 100%; width: 86%; background: linear-gradient( 90deg, var(--color-primary-soft), var(--color-primary) ); } .hero-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; font-size: 0.75rem; color: #d6e6ce; } .hero-card__pill { border-radius: 999px; border: 1px solid rgba(204, 224, 194, 0.9); padding: 0.25rem 0.6rem; } /* ========== Home – Services Overview ========== */ .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; } .card { background: var(--color-bg); border-radius: var(--radius-lg); padding: 1.6rem; border: 1px solid var(--color-border); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 0.8rem; } .card--dark { background: var(--color-surface-alt); color: #f9fafb; border-color: rgba(26, 51, 27, 0.95); } .card__eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary); } .card__title { font-size: 1.15rem; margin-bottom: 0.25rem; } .card__text { font-size: 0.95rem; color: var(--color-muted); } .card--dark .card__text { color: #e3eedf; } .card__meta { margin-top: auto; font-size: 0.85rem; color: var(--color-muted); } /* ========== “Tell me more about…” links ========== */ .category-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .category-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: #000; color: #f9fafb; } .category-card__image { position: relative; height: 220px; overflow: hidden; } .category-card__image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 0.25s ease-out; } .category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); } .category-card__content { position: absolute; bottom: 1.2rem; left: 1.3rem; right: 1.3rem; } .category-card__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-accent); } .category-card__title { font-size: 1.2rem; font-weight: 600; } .category-card__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.9rem; color: #e5e7eb; } .category-card:hover img { transform: scale(1.09); } /* ========== Inner Page Layouts ========== */ .subhero { background: radial-gradient( circle at top left, var(--color-primary-soft) 0%, var(--color-primary) 55%, var(--color-surface-alt) 100% ); color: #f9fafb; padding: 3.5rem 0 3rem; } .subhero__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: #e4f2dd; margin-bottom: 0.7rem; } .subhero__title { font-size: 2rem; margin-bottom: 0.6rem; } .subhero__text { max-width: 40rem; color: #eaf5e4; } /* Lists */ .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { display: flex; align-items: flex-start; gap: 0.55rem; margin-bottom: 0.45rem; font-size: 0.95rem; } .feature-list span.bullet { margin-top: 0.2rem; width: 0.65rem; height: 0.65rem; border-radius: 999px; background: linear-gradient( 135deg, var(--color-primary-soft), var(--color-primary) ); } /* Gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } .gallery-item { position: relative; overflow: hidden; border-radius: 18px; background: #000; } .gallery-item img { width: 100%; height: 210px; object-fit: cover; transform: scale(1.04); transition: transform 0.22s ease-out, opacity 0.22s ease-out; } .gallery-item__label { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.85rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; background: rgba(0, 0, 0, 0.65); color: #f9fafb; } .gallery-item:hover img { transform: scale(1.08); opacity: 0.9; } /* Contact */ .contact-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr); gap: 2.5rem; align-items: flex-start; } .form { background: var(--color-bg); border-radius: var(--radius-lg); padding: 1.8rem; border: 1px solid var(--color-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06); } .form__row { margin-bottom: 1.1rem; } .form__row--inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.25rem; } input[type="text"], input[type="email"], textarea { width: 100%; border-radius: 10px; border: 1px solid var(--color-border); padding: 0.7rem 0.85rem; font-size: 0.95rem; transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; } textarea { min-height: 140px; resize: vertical; } input:focus, textarea:focus { outline: none; border-color: var(--color-primary-soft); box-shadow: 0 0 0 1px rgba(199, 222, 91, 0.35); } .form__note { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.7rem; } /* Contact details card */ .contact-card { background: #f6f6f6; color: #555555; border-radius: var(--radius-lg); padding: 1.6rem; border: 1px solid #d4d4d4; } .contact-card h3 { margin-top: 0; margin-bottom: 0.8rem; } .contact-card__row { margin-bottom: 0.8rem; font-size: 0.95rem; } .contact-card__row strong { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.1rem; color: #777777; } .contact-card__row a { color: #555555; } .contact-card__map { margin-top: 1.1rem; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #e0e0e0; } .contact-card__map iframe { width: 100%; height: 100%; border: 0; } /* ========== Footer ========== */ .footer { background: #e5e5e5; color: #555555; padding: 2.8rem 0 1.8rem; margin-top: 3rem; } .footer__top { display: grid; grid-template-columns: 1.6fr 1.1fr 1.1fr; gap: 2.5rem; margin-bottom: 2.2rem; } .footer__brand-title { color: #333333; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 0.5rem; } .footer__text { font-size: 0.9rem; color: #666666; } .footer__list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; } .footer__list li + li { margin-top: 0.35rem; } .footer__list a { color: #555555; } .footer__address { font-size: 0.9rem; } .footer__bottom { border-top: 1px solid #c8c8c8; padding-top: 1.2rem; font-size: 0.8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; } /* ========== Utilities ========== */ .text-center { text-align: center; } .mt-sm { margin-top: 0.5rem; } .mt-md { margin-top: 1rem; } .mt-lg { margin-top: 2rem; } /* ========== Responsive ========== */ @media (max-width: 960px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } .hero__visual { order: -1; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-layout { grid-template-columns: minmax(0, 1fr); } .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 720px) { .top-bar__inner { flex-direction: column; align-items: flex-start; } .hero { padding-top: 3rem; } .grid, .category-links, .gallery-grid { grid-template-columns: minmax(0, 1fr); } .footer__top { grid-template-columns: minmax(0, 1fr); } /* Mobile nav */ .nav-toggle-label { display: block; } .nav-toggle-label span { background: #111827; } .nav { position: absolute; inset: 100% 0 auto 0; background: #ffffff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); } .nav__list { flex-direction: column; align-items: flex-start; padding: 0.75rem 1.5rem 1.1rem; gap: 0.75rem; } .nav__cta { margin: 0.5rem 1.5rem 1.2rem; } .nav-toggle:checked ~ .nav { max-height: 320px; } }