/* ============================================================ Royal Paws Companions — Global Stylesheet ============================================================ */ /* ---------- Google Fonts loaded in each page ---------- */ /* ---------- Reset & Variables ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --cream: #fdf8f2; --cream2: #f5ede0; --brown: #7a4f2e; --brown-d: #4a2e16; --brown-l: #a06b42; --gold: #c9913a; --gold-l: #e8b55a; --green: #3d5c3a; --green-l: #527a4e; --dark: #1a0f05; --dark2: #2c1a0a; --white: #ffffff; --gray: #9e8e7e; --gray-l: #f5f0eb; --border: rgba(122,79,46,.12); --shadow: 0 4px 24px rgba(26,15,5,.10); --shadow-lg: 0 16px 56px rgba(26,15,5,.18); --radius: 16px; --trans: .3s ease; } html { scroll-behavior: smooth; } body { font-family: 'Nunito', sans-serif; background: var(--cream); color: var(--dark); line-height: 1.7; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: 'Playfair Display', serif; line-height: 1.25; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } /* ---------- Typography helpers ---------- */ .section-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .section-header-center { text-align: center; margin-bottom: 60px; } .section-header-center h2 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); color: var(--brown-d); } .section-header-center p { color: var(--gray); max-width: 560px; margin: 14px auto 0; font-size: 1.05rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 50px; font-family: 'Nunito', sans-serif; font-size: .93rem; font-weight: 700; cursor: pointer; border: none; transition: all var(--trans); text-decoration: none; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-gold { background: var(--gold); color: var(--white); } .btn-gold:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,145,58,.38); } .btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); } .btn-outline:hover { background: var(--white); color: var(--dark); } .btn-brown { background: var(--brown); color: var(--white); } .btn-brown:hover { background: var(--brown-d); transform: translateY(-2px); } .btn-dark { background: var(--dark); color: var(--white); } .btn-dark:hover { background: var(--brown-d); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--brown-d); border: 2px solid var(--border); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } /* ---------- Page Hero (inner pages) ---------- */ .page-hero { position: relative; background: linear-gradient(135deg, var(--dark) 0%, var(--brown-d) 55%, var(--dark2) 100%); padding: 100px 0 80px; text-align: center; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9913a' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .page-hero-content { position: relative; z-index: 1; } .page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--white); margin-bottom: 14px; } .page-hero h1 em { color: var(--gold-l); font-style: italic; } .page-hero p { color: rgba(255,255,255,.7); font-size: 1.1rem; max-width: 560px; margin: 0 auto; } .page-hero-badge { display: inline-block; margin-bottom: 18px; background: rgba(201,145,58,.18); border: 1px solid rgba(201,145,58,.4); color: var(--gold-l); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 20px; border-radius: 50px; backdrop-filter: blur(8px); } /* ---------- Cards ---------- */ .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); transition: transform var(--trans), box-shadow var(--trans); overflow: hidden; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* ---------- Puppy Cards ---------- */ .puppies-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; } .puppy-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); transition: all var(--trans); } .puppy-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .puppy-img { height: 240px; overflow: hidden; position: relative; } .puppy-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .puppy-card:hover .puppy-img img { transform: scale(1.06); } .puppy-status { position: absolute; top: 14px; right: 14px; padding: 4px 14px; border-radius: 50px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .status-available { background: var(--green); color: var(--white); } .status-reserved { background: var(--gold); color: var(--white); } .puppy-body { padding: 22px; } .puppy-body h3 { font-size: 1.2rem; color: var(--brown-d); margin-bottom: 8px; } .puppy-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .puppy-tag { background: var(--cream2); color: var(--brown); font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; border: 1px solid var(--border); } .puppy-color { color: var(--gray); font-size: .88rem; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .puppy-color svg { width:14px; height:14px; color: var(--gold); flex-shrink:0; } .puppy-price { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--gold); font-weight: 700; margin-bottom: 14px; } .puppy-btn { display: block; text-align: center; background: var(--brown); color: var(--white); padding: 11px; border-radius: 50px; font-size: .88rem; font-weight: 700; transition: all var(--trans); } .puppy-btn:hover { background: var(--brown-d); } .no-puppies { text-align: center; grid-column: 1/-1; padding: 60px 20px; color: var(--gray); } .no-puppies h3 { font-size: 1.5rem; margin-bottom: 12px; color: var(--brown-d); } /* ---------- FAQ Accordion ---------- */ .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; box-shadow: 0 2px 10px rgba(26,15,5,.05); transition: box-shadow var(--trans); } .faq-item.open { box-shadow: var(--shadow); } .faq-q { padding: 20px 26px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--brown-d); font-weight: 600; user-select: none; transition: color var(--trans); } .faq-q:hover { color: var(--gold); } .faq-icon { width: 28px; height: 28px; background: var(--cream2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--trans), background var(--trans); } .faq-icon svg { width: 14px; height: 14px; color: var(--gold); transition: color var(--trans); } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--gold); } .faq-item.open .faq-icon svg { color: var(--white); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; padding: 0 26px; } .faq-a-inner { padding-bottom: 20px; color: #4a3a2a; font-size: .96rem; line-height: 1.8; } .faq-item.open .faq-a { max-height: 600px; } /* ---------- CTA Strip ---------- */ .section-cta { padding: 96px 0; background: linear-gradient(135deg, var(--brown-d) 0%, var(--brown) 60%, var(--brown-l) 100%); position: relative; overflow: hidden; } .cta-content { text-align: center; position: relative; z-index: 1; } .cta-content h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--white); margin-bottom: 14px; } .cta-content h2 em { color: var(--gold-l); font-style: italic; } .cta-content p { color: rgba(255,255,255,.78); max-width: 560px; margin: 0 auto 36px; font-size: 1.05rem; } .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- Announcement bar ---------- */ .announcement-bar { background: var(--green); color: var(--white); text-align: center; padding: 10px 24px; font-size: .86rem; font-weight: 600; position: relative; z-index: 1001; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .announcement-bar svg { width: 15px; height: 15px; flex-shrink: 0; } .announcement-bar a { color: var(--gold-l); text-decoration: underline; margin-left: 12px; font-weight: 700; } .ann-phone { margin-left: 18px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; } .ann-phone svg { width: 14px; height: 14px; } /* ---------- Responsive ---------- */ @media(max-width: 1100px) { .puppies-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width: 768px) { .container { padding: 0 20px; } .puppies-grid { grid-template-columns: 1fr 1fr; } } @media(max-width: 540px) { .puppies-grid { grid-template-columns: 1fr; } }