/* ================================ GlowPro Cleaning Co. Stylesheet ================================ */ :root{ /* Palette (from your logo list) */ --brand-purple:#9e4f9e; --brand-teal:#88a2a1; --brand-dark:#3d4c39; --green-1:#79c59d; --green-2:#87dcb0; --green-3:#7dcca2; --yellow-1:#fae17d; --yellow-2:#fffe8d; --yellow-3:#ffffa4; --white:#ffffff; --gray-1:#94b1b0; --gray-2:#586969; --black:#000000; --border-1:#150b13; --border-2:#452343; --border-3:#9c466d; /* Page accent (themeable) */ --accent: var(--brand-purple); } *{box-sizing:border-box} body{ margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--gray-2); background:var(--white); } /* THEMES: set on to change page accent */ .theme-purple{ --accent:var(--brand-purple); } .theme-teal { --accent:var(--brand-teal); } .theme-green { --accent:var(--green-2); } .theme-yellow { --accent:var(--yellow-1); } .theme-gray { --accent:var(--gray-1); } a{ color:var(--accent); text-decoration:none } a:hover{ text-decoration:underline } .container{ width:min(1120px,92vw); margin:auto } /* Header */ .site-header{ background:var(--accent); color:var(--white); position:sticky; top:0; z-index:10; border-bottom:1px solid #0002; backdrop-filter:saturate(140%) blur(4px); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; } .brand img{ height:48px; display:block } /* Nav */ .nav{ list-style:none; display:flex; gap:16px; margin:0; padding:0 } .nav a{ color:var(--white); font-weight:600 } .nav a:hover{ color:var(--yellow-1) } /* Buttons */ .btn{ display:inline-block; padding:10px 16px; border-radius:12px; font-weight:700; text-align:center; border:0; } .btn-primary{ background:var(--green-2); color:#001 } .btn-primary:hover{ background:var(--green-3) } .btn-secondary{ background:var(--yellow-1); color:#222 } .btn-secondary:hover{ background:var(--yellow-2) } .btn-outline{ background:transparent; color:var(--white); border:2px solid var(--white) } .btn-small{ padding:8px 12px; font-size:14px } /* Hero */ .hero{ color:var(--white); padding:72px 0; text-align:center; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 85%, black 5%), color-mix(in oklab, var(--brand-dark) 85%, black 5%)); position:relative; } .hero.has-image{ background-size:cover; background-position:center; } .hero .sub{ color:var(--yellow-2); max-width:60ch; margin:0 auto } .cta-row{ display:flex; gap:12px; justify-content:center; margin:18px 0 6px } /* Sections */ .section{ padding:40px 0 } .section-title{ color:var(--accent); margin:0 0 10px } /* Cards / grids */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; } .card{ background:var(--white); border:1px solid #00000012; border-radius:16px; overflow:hidden; box-shadow:0 10px 20px #0000000f; } .card img{ width:100%; height:160px; object-fit:cover; display:block } .card .pad{ padding:14px } .card h3{ margin:0 0 6px; color:var(--brand-dark) } /* Before/After */ .ba-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; } .ba{ border-radius:16px; overflow:hidden; border:1px solid #00000012 } .ba img{ width:100%; height:220px; object-fit:cover; display:block } .ba .label{ padding:8px 12px; font-weight:700; color:#222; background:var(--yellow-1) } /* Contact */ .contact{ background:linear-gradient(180deg,#faf9fb,var(--white)); border-top:1px solid #00000012; border-bottom:1px solid #00000012; } .contact .card{ background:var(--green-1); color:#001; border:2px solid var(--border-3); } /* Footer */ .site-footer{ margin-top:40px; padding:24px 0; background:var(--brand-dark); color:var(--white); } .footer-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start } .footer-nav{ list-style:none; margin:0; padding:0 } .footer-nav li{ margin:6px 0 } /* Responsive */ @media (max-width:720px){ .cta-row{ flex-direction:column; align-items:center } .footer-grid{ grid-template-columns:1fr } } /* ========================= HEADER SHRINK — layout-height version ========================= */ /* Default variables */ :root { --logo-large: 200px; --logo-small: 36px; --pad-large: 28px; --pad-small: 4px; } /* Drive size via variables that affect LAYOUT, not just paint */ .site-header .logo { height: var(--logo-h, var(--logo-large)); width: auto; transition: height 360ms cubic-bezier(.22,.61,.36,1); display: block; } .site-header .header-inner { padding: var(--pad, var(--pad-large)) 0; transition: padding 320ms cubic-bezier(.22,.61,.36,1); } /* States (toggled by JS) */ .site-header.large { --logo-h: var(--logo-large); --pad: var(--pad-large); } .site-header.small { --logo-h: var(--logo-small); --pad: var(--pad-small); } /* Ensure the bar actually collapses */ .site-header.small { min-height: 48px; } /* Mobile */ @media (max-width:780px){ :root { --logo-large: 140px; --logo-small: 32px; --pad-large: 16px; --pad-small: 4px; } .header-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .nav { font-size: 16px; } } /* (Keep your PAGE THEMES block below as-is) */ /* Footer link styles aligned with header behavior */ .site-footer .footer-link, .site-footer .footer-nav a { color: #fff; text-decoration: none; } .site-footer .footer-nav a:hover, .site-footer .footer-link:hover { color: var(--accent); text-decoration: underline; } .footer-nav-wrap { display: flex; gap: 16px; align-items: center; } .footer-nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 720px){ .footer-nav-wrap { flex-direction: column; align-items: flex-start; gap: 10px; } } /* Home page contact card adjustments */ .section.contact .card a { color: #111; /* dark text for contrast */ font-weight: 600; /* a little bolder */ text-decoration: none; /* keep it clean */ } .section.contact .card a:hover { color: var(--accent); /* hover still matches theme */ } /* keep footer logo from growing unexpectedly */ .site-footer .footer-logo-fixed { height: 56px !important; width: auto; display: inline-block; } /* tidy the right column when nav links are gone */ .site-footer .footer-nav-wrap { display: flex; align-items: center; gap: 12px; } .site-footer .social { color: var(--accent); opacity:.95; } .site-footer .social:hover { opacity:1; transform: translateY(-1px); } .visually-hidden { position:absolute; left:-10000px; }