/* Full style.css contents — replace the repo file with this exact content */ :root{ --bg: #ffffff; --text: #202124; --muted: #6b6f76; --pill-bg: #FFEBFB; /* normal pill background — light pink */ --pill-text: #202124; /* pill text (dark for contrast) */ --pill-active-bg: #E5CAED; /* active/current pill — light purple */ --pill-active-text: #202124; --pill-hover-bg: #E0F9FF; /* hover/focus pill background — light blue */ --pill-hover-text: #202124; --focus: #F9FFE0; /* light yellow focus outline */ --brand: #6b2e6b; /* primary brand purple */ --accent: #f6c6e7; /* soft light pink accent */ /* Font variables (link to fonts must be in HTML , not here) */ --ui-font: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --decorative-welcome: "The Nautigal", serif; --decorative-follow: "Delius Swash Caps", cursive; --max-width: 1100px; --footer-max-width: 600px; --footer-height: 104px; --footer-inner-padding-x: 0.75rem; --hero-max-width: 720px; --footer-bottom: 50px; } /* Reset & base */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; /* Make the page a column flex so we can push the footer to the bottom when content is short */ display: flex; flex-direction: column; min-height: 100vh; /* site UI font: Roboto Flex (set in root) */ font-family: var(--ui-font); background-color:var(--bg); color:var(--text); line-height:1.45; -webkit-font-smoothing:antialiased; /* decorative background */ background-image: url('simplewhitefloral.jpg'); background-repeat: repeat; background-position: top center; background-size: auto; } /* --- GLOBAL OVERLAY (non-hero sections) --- */ .site-main { position: relative; background: transparent; z-index: 0; /* Allow main to grow and take available space so footer stays at bottom */ flex: 1 0 auto; /* Keep page content clear of the fixed footer on all viewports */ padding-bottom: calc(var(--footer-height) + 0.5rem); } /* Ensure direct children sit above their overlay pseudo-element */ .site-main > * { position: relative; z-index: 1; } /* Apply global overlay to everything except hero, home intro, about, services */ .site-main > *:not(.center-photo):not(.home-intro):not(.about-hero):not(.services-hero)::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.60); /* adjust as you like */ backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; z-index: 0; border-radius: inherit; } /* Make the hero container explicitly transparent */ .center-photo { background: transparent; } /* Header/footer backdrop */ .site-header, .site-footer { background: rgba(255,255,255,0.85); position: relative; z-index: 10; } /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .site-main > *:not(.center-photo):not(.home-intro)::before { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Skip link */ .skip-link{ position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; text-decoration: none; color: inherit; } .skip-link:focus, .skip-link:active, .skip-link:focus-visible{ position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem .75rem; background: var(--brand); color: #fff; z-index: 9999; border-radius: 4px; display: inline-flex; align-items: center; gap: .5rem; transition: background .15s ease, color .15s ease; } .skip-icon{ display:inline-block; transition: transform .6s cubic-bezier(.2,.9,.3,1); transform-origin: center; } .skip-link:hover .skip-icon, .skip-link:focus-visible .skip-icon, .skip-link:active .skip-icon { transform: rotate(360deg); } @media (prefers-reduced-motion: reduce) { .skip-icon { transition: none; transform: none; } } /* Layout container */ .top-bar{ display:flex; align-items:center; justify-content:space-between; max-width:var(--max-width); margin:0 auto; padding:0.2rem 1rem; gap:1rem; } .header-divider { width: 1px; height: 48px; background: rgba(0,0,0,0.08); } /* Logo */ .logo-img, .footer-photo{ display:block; max-width:100%; height:auto; object-fit:contain; } /* Nav - pill style */ .primary-nav{ z-index: 12; -webkit-overflow-scrolling: touch; } .primary-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; align-items:center; flex-wrap: wrap; } .primary-nav a{ display:inline-block; text-decoration:none; color:var(--pill-text); background: var(--pill-bg); padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(0,0,0,0.06); font-weight: 500; font-size: 0.95rem; transition: background-color .18s ease, color .18s ease, transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease; -webkit-tap-highlight-color: transparent; transform-origin: center; min-width: max-content; } .primary-nav a:hover, .primary-nav a:focus, .primary-nav a:focus-visible { background: var(--pill-hover-bg); color: var(--pill-hover-text); box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-3px) scale(1.03); /* reduced lift to -3px */ } .primary-nav a[aria-current="page"], .primary-nav a.active { background: var(--pill-active-bg); color: var(--pill-active-text); box-shadow: 0 2px 10px rgba(0,0,0,0.06); transform: none; } /* Tidy header for phones */ @media (max-width: 640px) { .top-bar { flex-direction: column; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem 0.85rem; text-align: center; } .header-divider { display: none; } .primary-nav ul { justify-content: center; gap: 0.35rem; } .primary-nav a { font-size: 0.9rem; padding: 0.35rem 0.7rem; } } /* Focus visuals */ .primary-nav a:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; } /* Hero image container */ .center-photo{ display:flex; justify-content:center; align-items:center; padding:2rem 1rem; } .hero-image{ width:100%; max-width: var(--hero-max-width); height:auto; object-fit:cover; aspect-ratio: 16 / 9; border-radius:8px; } /* ------------------------- Footer (redesigned & fixed) ------------------------- */ /* Fixed footer container (stays at bottom of viewport) */ .site-footer { position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-height); z-index: 9999; background: rgba(255,255,255,0.78); /* slightly white & transparent */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-top: 1px solid rgba(0,0,0,0.04); box-sizing: border-box; overflow: visible; /* don't create internal scroll */ display: block; } /* inner grid: left / divider / right keeps divider centered regardless of content width */ .site-footer .footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; max-width: var(--max-width); margin: 0 auto; padding: 0 calc(var(--footer-inner-padding-x)); height: 100%; box-sizing: border-box; min-width: 0; } /* ---- Left column: social icons + label ---- */ .site-footer .footer-left { grid-column: 1; justify-self: end; /* right edge hugs the divider */ display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 0; margin: 0; padding-right: 0; } /* row of icons */ .site-footer .footer-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: center; flex-wrap: nowrap; } /* circular icon buttons */ .social-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; padding: 0; background: transparent; text-decoration: none; transform-origin: 50% 50%; transition: transform 0.45s cubic-bezier(.21,.9,.3,1); /* slightly snappier */ -webkit-tap-highlight-color: transparent; border: none; } /* icon image inside button */ .social-icon { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* spin on hover/focus (respect reduced-motion preference) */ @media (prefers-reduced-motion: no-preference) { .social-btn:hover, .social-btn:focus { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .social-btn { transition: none; transform: none; } } /* "Follow Along" decorative label below icons */ .follow-label { margin-top: 0.15rem; font-family: var(--decorative-follow); font-size: 1.05rem; color: var(--text); text-align: center; line-height: 1; } /* ---- Divider (center) ---- */ .site-footer .footer-divider { grid-column: 2; justify-self: center; width: 1px; height: calc(var(--footer-height) - 20px); background: rgba(0,0,0,0.08); /* softened divider */ margin: 0 0.25rem; box-sizing: border-box; } /* ---- Right column: logo + copy ---- */ .site-footer .footer-right { grid-column: 3; justify-self: start; /* left edge hugs the divider */ display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; margin: 0; text-align: center; } /* logo sizing */ .site-footer .footer-photo { width: 64px; height: auto; object-fit: contain; display: block; border-radius: 6px; } /* brand title and tagline */ .site-footer .brand-title { font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: 0.4px; } .site-footer .brand-tag { font-size: 0.9rem; color: var(--text); } /* copyright (small-caps) */ .site-footer .footer-copyright { margin-top: 0.35rem; font-size: 0.82rem; font-variant: small-caps; color: var(--muted); opacity: 0.95; } /* ------------------------- Responsive tweaks (keep side-by-side) ------------------------- */ /* reduce sizes slightly on very small screens but keep grid/side-by-side layout */ @media (max-width: 480px) { .social-btn { width: 40px; height: 40px; } .site-footer .footer-photo { width: 56px; } .follow-label { font-size: 0.95rem; } .site-footer .brand-title { font-size: 0.95rem; } .site-footer .brand-tag { font-size: 0.85rem; } .site-footer .footer-divider { height: calc(var(--footer-height) - 24px); } .site-main { padding-bottom: calc(var(--footer-height) + 0.25rem); } } /* Collapse footer to single-column on very small viewports */ @media (max-width: 420px) { .site-footer .footer-inner { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 0.35rem; padding: 0 .6rem; justify-items: center; } .site-footer .footer-divider { display: none; } .site-footer .footer-left, .site-footer .footer-right { justify-self: center; } } /* ------------------------- Utility / accessibility ------------------------- */ a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } /* keep images from overflowing */ img { max-width: 100%; height: auto; display: block; } /* Ensure service images never cause horizontal overflow */ .service-figure img, .service-photo { max-width: 100%; width: auto; height: auto; display: block; border-radius: 8px; object-fit: cover; } /* ---------- HOME INTRO: blurred card & decorative heading ---------- */ .home-intro { /* keep container behaviour; no change needed normally */ max-width: 1200px; /* allow more room if needed */ margin: 1.75rem auto; padding: 0; text-align: center; } .intro-card { width: clamp(420px, 60%, 800px); max-width: 100%; margin: 0 auto; padding: 1.25rem 1.1rem; border-radius: 10px; background: rgba(255,255,255,0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.06); position: relative; z-index: 2; } .home-intro { text-align: center; padding-left: .6rem; padding-right: .6rem; } /* UPDATED: welcome title moved outside the card and styled here (color #6322C9, centered, slightly larger) */ .welcome-title { margin: 0; font-family: var(--decorative-welcome); color: #6322C9; /* updated color */ font-weight: 700; /* corrected clamp: min <= preferred <= max */ font-size: clamp(1.8rem, 4.8vw, 3.4rem); line-height: 1.02; letter-spacing: 0.4px; margin-bottom: 0.5rem; text-align: center; /* centered above the intro-card */ } /* existing intro text rules */ .intro-text { margin: 0.5rem auto 0; color: var(--text); font-family: var(--ui-font); font-size: clamp(0.95rem, 1.8vw, 1.05rem); line-height: 1.5; max-width: 56ch; text-align: justify; } .home-intro .intro-text[style] { font-weight: 600; } @media (max-width: 700px) { .intro-card { width: calc(100% - 2rem); padding: 0.9rem 0.85rem; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .home-intro { text-align: justify; padding-left: .6rem; padding-right: .6rem; } .welcome-title { font-size: clamp(1.8rem, 8vw, 2.6rem); } /* adjusted small-screen size */ .intro-text { font-size: 0.98rem; max-width: 50ch; } /* Improve readability on small screens */ .home-intro .intro-text { text-align: left; } } /* Services image rules (repeat to ensure available) */ .service-figure { margin: 0 0 1rem 0; overflow: auto; /* allows the intrinsic image to overflow if very wide */ } .service-figure img, .service-photo { width: auto; /* use the image's intrinsic width */ max