/* ============================================================ RFPG — Rental Franchise Partners Group Plain CSS — Bluehost / Apache compatible Design: Textured Elegance — Warm Parchment + Espresso + Gold ============================================================ */ /* Google Fonts loaded in of each page */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --parchment: #DDD8CE; --espresso: #1C1712; --gold: #B8960C; --gold-light: #D4AF37; --text-muted: rgba(28,23,18,0.65); --white: #ffffff; --radius: 2px; --container: 1200px; --font-serif: 'Playfair Display', Georgia, serif; --font-body: 'Lora', Georgia, serif; --font-ui: 'Nunito Sans', Arial, sans-serif; } html { scroll-behavior: smooth; } body { background-color: var(--parchment); color: var(--espresso); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ── Container ── */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 2rem; font-family: var(--font-ui); font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: none; border-radius: var(--radius); cursor: pointer; transition: opacity .2s, transform .15s; } .btn:hover { opacity: .88; } .btn:active { transform: scale(.97); } .btn-dark { background: var(--espresso); color: var(--parchment); } .btn-outline { background: transparent; color: var(--espresso); border: 1.5px solid rgba(28,23,18,.35); } .btn-outline:hover { border-color: var(--gold); } /* ── Gold rule ── */ .gold-rule { height: 1px; background: var(--gold); opacity: .4; width: 100%; } .gold-rule-short { height: 1px; background: var(--gold); opacity: .7; width: 3rem; } /* ── Section label ── */ .section-label { font-family: var(--font-ui); font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } /* ── Headings ── */ h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.15; color: var(--espresso); } /* ============================================================ NAVBAR ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .4s, box-shadow .4s; } .navbar.scrolled { background: rgba(221,216,206,.97); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(184,150,12,.25); box-shadow: 0 2px 20px rgba(28,23,18,.08); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .navbar-logo { display: flex; align-items: center; gap: .6rem; } .navbar-logo-badge { width: 36px; height: 36px; background: var(--espresso); color: var(--parchment); font-family: var(--font-serif); font-weight: 900; font-size: .8rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); } .navbar-logo-text { font-family: var(--font-serif); font-size: .9rem; font-weight: 700; letter-spacing: .04em; color: var(--espresso); } .navbar-links { display: flex; align-items: center; gap: 1.8rem; } .navbar-links a { font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: var(--espresso); letter-spacing: .03em; position: relative; transition: color .2s; } .navbar-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .3s; } .navbar-links a:hover::after { width: 100%; } .navbar-admin-btn { display: flex; align-items: center; gap: .4rem; padding: .35rem .85rem; background: var(--espresso); color: var(--parchment); font-family: var(--font-ui); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border: none; border-radius: var(--radius); cursor: pointer; transition: opacity .2s; text-decoration: none; } .navbar-admin-btn:hover { opacity: .8; } /* Mobile hamburger */ .navbar-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--espresso); padding: .4rem; } .navbar-mobile { display: none; background: rgba(221,216,206,.98); border-top: 1px solid rgba(184,150,12,.25); padding: 1rem 0; } .navbar-mobile.open { display: block; } .navbar-mobile a { display: block; padding: .75rem 1.5rem; font-family: var(--font-ui); font-size: .9rem; font-weight: 600; color: var(--espresso); border-bottom: 1px solid rgba(184,150,12,.15); } @media (max-width: 1023px) { .navbar-links { display: none; } .navbar-toggle { display: block; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-image: url('../images/rfpg-hero.jpg'); background-size: cover; background-position: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(221,216,206,.82) 0%, rgba(221,216,206,.55) 50%, rgba(221,216,206,.15) 100%); } .hero-content { position: relative; z-index: 2; padding: 8rem 0 5rem; max-width: 640px; } .hero-eyebrow { font-family: var(--font-ui); font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--espresso); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .75rem; } .hero-eyebrow::before { content: ''; display: inline-block; width: 2.5rem; height: 1px; background: var(--gold); } .hero-title { font-family: var(--font-serif); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 700; line-height: 1.08; color: var(--espresso); margin-bottom: 1.5rem; } .hero-title em { font-style: italic; color: var(--gold); } .hero-desc { font-family: var(--font-body); font-size: 1.05rem; color: rgba(28,23,18,.78); line-height: 1.8; margin-bottom: 2.5rem; max-width: 480px; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* ============================================================ ABOUT ============================================================ */ .about-section { padding: 5rem 0; background: var(--espresso); color: var(--parchment); } .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-label { color: var(--gold-light); } .about-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--parchment); margin: 1rem 0 1.5rem; } .about-text { font-family: var(--font-body); font-size: 1rem; color: rgba(221,216,206,.75); line-height: 1.85; margin-bottom: 1.2rem; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; } .stat-card { background: rgba(221,216,206,.07); border: 1px solid rgba(184,150,12,.2); border-radius: var(--radius); padding: 1.2rem 1.5rem; text-align: center; } .stat-number { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--gold-light); } .stat-label { font-family: var(--font-ui); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(221,216,206,.55); margin-top: .25rem; } @media (max-width: 767px) { .about-inner { grid-template-columns: 1fr; gap: 2rem; } } /* ============================================================ SERVICE SECTIONS ============================================================ */ .service-section { padding: 5.5rem 0; background: var(--parchment); } .service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .service-grid.reverse { direction: rtl; } .service-grid.reverse > * { direction: ltr; } .service-img { position: relative; overflow: hidden; min-height: 380px; } .service-img img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; transition: transform .6s ease; } .service-img:hover img { transform: scale(1.03); } .service-img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(28,23,18,.12) 100%); } .service-text { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 3.5rem; } .service-title { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--espresso); margin: 1rem 0 1.2rem; } .service-desc { font-family: var(--font-body); font-size: 1rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1.8rem; } .service-features { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 2rem; } .service-feature { display: flex; align-items: center; gap: .75rem; font-family: var(--font-ui); font-size: .875rem; font-weight: 600; color: var(--espresso); } .service-feature::before { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8960C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; } .service-cta { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--espresso); background: none; border: none; padding: 0; cursor: pointer; transition: gap .25s; text-decoration: none; } .service-cta:hover { gap: .85rem; } .service-cta::after { content: '→'; } @media (max-width: 1023px) { .service-grid, .service-grid.reverse { grid-template-columns: 1fr; direction: ltr; } .service-text { padding: 2rem 1.5rem; } .service-img { min-height: 260px; } .service-img img { min-height: 260px; } } /* ============================================================ CONTACT ============================================================ */ .contact-section { padding: 5.5rem 0; background: var(--espresso); } .contact-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; } .contact-info-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--parchment); margin: 1rem 0 1.5rem; } .contact-info-text { font-family: var(--font-body); color: rgba(221,216,206,.7); line-height: 1.8; margin-bottom: 2rem; } .contact-detail { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; } .contact-detail-icon { color: var(--gold-light); flex-shrink: 0; margin-top: .15rem; } .contact-detail-text { font-family: var(--font-ui); font-size: .9rem; color: rgba(221,216,206,.75); line-height: 1.5; } .contact-detail-text a { color: rgba(221,216,206,.75); transition: color .2s; } .contact-detail-text a:hover { color: var(--gold-light); } /* Form */ .contact-form-wrap { background: rgba(221,216,206,.06); border: 1px solid rgba(184,150,12,.2); border-radius: var(--radius); padding: 2.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { margin-bottom: 1.2rem; } .form-label { display: block; font-family: var(--font-ui); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(221,216,206,.6); margin-bottom: .45rem; } .form-label span { color: var(--gold-light); } .form-input, .form-select, .form-textarea { width: 100%; padding: .75rem 1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(221,216,206,.2); border-radius: var(--radius); color: var(--parchment); font-family: var(--font-body); font-size: .95rem; transition: border-color .2s, background .2s; outline: none; } .form-input::placeholder, .form-textarea::placeholder { color: rgba(221,216,206,.3); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold); background: rgba(255,255,255,.12); } .form-select option { background: var(--espresso); color: var(--parchment); } .form-textarea { resize: vertical; min-height: 130px; } .form-privacy { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.2rem; } .form-privacy input { margin-top: .2rem; accent-color: var(--gold); flex-shrink: 0; } .form-privacy label { font-family: var(--font-body); font-size: .8rem; color: rgba(221,216,206,.5); line-height: 1.6; } .form-success { text-align: center; padding: 2rem; color: var(--parchment); font-family: var(--font-body); } .form-success h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: .75rem; } .form-error { color: #e74c3c; font-family: var(--font-body); font-size: .85rem; margin-bottom: .75rem; } @media (max-width: 1023px) { .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; } .form-row { grid-template-columns: 1fr; } } /* ============================================================ FOOTER ============================================================ */ .footer { background: #110e0a; color: rgba(221,216,206,.55); padding: 4rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(184,150,12,.15); margin-bottom: 2rem; } .footer-brand-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--parchment); margin-bottom: .75rem; } .footer-brand-desc { font-family: var(--font-body); font-size: .85rem; line-height: 1.7; color: rgba(221,216,206,.45); max-width: 260px; } .footer-col-title { font-family: var(--font-ui); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1rem; } .footer-links { display: flex; flex-direction: column; gap: .5rem; } .footer-links a { font-family: var(--font-ui); font-size: .85rem; color: rgba(221,216,206,.55); transition: color .2s; } .footer-links a:hover { color: var(--gold-light); } .footer-contact-item { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .75rem; } .footer-contact-icon { color: var(--gold); flex-shrink: 0; margin-top: .1rem; } .footer-contact-text { font-family: var(--font-ui); font-size: .85rem; color: rgba(221,216,206,.55); line-height: 1.5; } .footer-contact-text a { color: rgba(221,216,206,.55); transition: color .2s; } .footer-contact-text a:hover { color: var(--gold-light); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-family: var(--font-ui); font-size: .78rem; color: rgba(221,216,206,.3); } @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 599px) { .footer-grid { grid-template-columns: 1fr; } } /* ============================================================ ADMIN PANEL ============================================================ */ .admin-body { background: #f4f5f7; font-family: var(--font-ui); } .admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--espresso); } .admin-login-card { background: var(--parchment); border-radius: 4px; padding: 2.5rem; width: 100%; max-width: 400px; box-shadow: 0 8px 40px rgba(0,0,0,.35); } .admin-login-title { font-family: var(--font-serif); font-size: 1.6rem; color: var(--espresso); margin-bottom: 1.5rem; text-align: center; } .admin-sidebar { width: 240px; background: var(--espresso); min-height: 100vh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; padding: 1.5rem 0; } .admin-sidebar-logo { padding: 0 1.5rem 1.5rem; border-bottom: 1px solid rgba(221,216,206,.1); margin-bottom: 1rem; } .admin-sidebar-logo span { font-family: var(--font-serif); font-size: .9rem; font-weight: 700; color: var(--parchment); } .admin-nav a { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.5rem; font-size: .875rem; font-weight: 600; color: rgba(221,216,206,.6); transition: color .2s, background .2s; } .admin-nav a:hover, .admin-nav a.active { color: var(--parchment); background: rgba(221,216,206,.08); } .admin-main { margin-left: 240px; padding: 2rem; min-height: 100vh; } .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .admin-page-title { font-family: var(--font-serif); font-size: 1.6rem; color: var(--espresso); } .admin-table { width: 100%; border-collapse: collapse; background: white; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .admin-table th { background: var(--espresso); color: var(--parchment); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: .85rem 1rem; text-align: left; } .admin-table td { padding: .85rem 1rem; border-bottom: 1px solid #eee; font-size: .875rem; color: #333; vertical-align: top; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: #fafafa; } .badge-unread { display: inline-block; background: var(--gold); color: white; font-size: .65rem; font-weight: 800; padding: .15rem .5rem; border-radius: 99px; letter-spacing: .05em; } .admin-card { background: white; border-radius: 4px; padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 1.5rem; } /* ============================================================ UTILITIES ============================================================ */ .text-gold { color: var(--gold); } .text-gold-light { color: var(--gold-light); } .text-muted { color: var(--text-muted); } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }