/* * ============================================================ * Knighted Technologies — Homepage & Confirmation Theme v2 * UCF-inspired: Black #221e1f | Gold #ad974e | Light Gold #D6A300 * * HOW TO USE: * Add AFTER theme.css in your : * * * This file is SEPARATE from the original theme-knighted.css. * Remove this link tag to revert completely. * Original theme-knighted.css is untouched. * ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600;700&display=swap'); /* ── CSS Custom Properties ────────────────────────────────── */ :root { /* Brand palette — UCF Black & Gold */ --kt-black: #221e1f; --kt-black-deep: #0d0b0c; --kt-black-mid: #2e2a2b; --kt-black-light: #3d3839; --kt-gold: #ad974e; --kt-gold-light: #d6a300; --kt-gold-pale: #e8c96a; --kt-gold-muted: rgba(173, 151, 78, 0.15); /* Neutrals */ --kt-off-white: #f9f7f2; --kt-warm-gray: #ebe7df; --kt-mid-gray: #c5bfb0; --kt-text-mid: #5a5348; --kt-text-light: #9e9589; /* Typography */ --kt-font-display: 'Cormorant Garamond', 'Playfair Display', serif; --kt-font-body: 'DM Sans', 'Nunito', sans-serif; } /* ── Reset & Base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--kt-font-body) !important; color: var(--kt-black); background: #fff; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--kt-font-display) !important; } /* ── HEADER ────────────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding: 18px 0; transition: background 0.4s, box-shadow 0.4s, padding 0.3s; } .site-header.scrolled { background: rgba(34, 30, 31, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); padding: 12px 0; } .header-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .header-logo img { height: 48px; } .header-nav { display: flex; gap: 4px; align-items: center; } .header-nav a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-family: var(--kt-font-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.03em; padding: 8px 14px; border-radius: 4px; transition: color 0.2s, background 0.2s; } .header-nav a:hover { color: var(--kt-gold-pale); background: rgba(255, 255, 255, 0.07); } .header-nav .btn-cta { background: var(--kt-gold) !important; color: #fff !important; padding: 9px 20px !important; border-radius: 6px !important; font-weight: 600 !important; margin-left: 8px; } .header-nav .btn-cta:hover { background: var(--kt-gold-light) !important; color: #fff !important; } /* ── HERO ──────────────────────────────────────────────────── */ .hero { min-height: 100vh; background: var(--kt-black); display: flex; align-items: center; position: relative; overflow: hidden; padding: 100px 0 80px; } .hero-bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(46, 42, 43, 0.8) 0%, transparent 70%), radial-gradient(circle at 10% 90%, rgba(173, 151, 78, 0.14) 0%, transparent 50%); } .hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 60px 60px; } .hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .hero-eyebrow { display: inline-block; background: rgba(173, 151, 78, 0.15); border: 1px solid rgba(173, 151, 78, 0.4); color: var(--kt-gold-pale); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; margin-bottom: 28px; animation: fadeUp 0.6s ease both; } .hero h1 { font-family: var(--kt-font-display) !important; font-size: clamp(2.4rem, 5vw, 4rem); color: #fff; line-height: 1.15; margin-bottom: 24px; max-width: 780px; animation: fadeUp 0.6s 0.15s ease both; } .hero h1 em { font-style: normal; color: var(--kt-gold-pale); } .hero-subtitle { font-size: 1.15rem; color: rgba(255, 255, 255, 0.7); line-height: 1.7; max-width: 580px; margin-bottom: 40px; font-weight: 300; animation: fadeUp 0.6s 0.3s ease both; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeUp 0.6s 0.45s ease both; } .btn-primary-gold { background: var(--kt-gold); color: #fff !important; font-weight: 600; font-size: 0.95rem; padding: 14px 32px; border-radius: 8px; text-decoration: none; border: none; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 20px rgba(173, 151, 78, 0.35); display: inline-block; } .btn-primary-gold:hover { background: var(--kt-gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(173, 151, 78, 0.45); color: #fff !important; } .btn-outline-white { background: transparent; color: rgba(255, 255, 255, 0.85) !important; font-weight: 500; font-size: 0.95rem; padding: 13px 28px; border-radius: 8px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25); transition: border-color 0.2s, color 0.2s, background 0.2s; display: inline-block; } .btn-outline-white:hover { border-color: rgba(255, 255, 255, 0.6); color: #fff !important; background: rgba(255, 255, 255, 0.06); } .hero-stats { display: flex; gap: 48px; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1); animation: fadeUp 0.6s 0.6s ease both; flex-wrap: wrap; } .hero-stat-num { font-family: var(--kt-font-display) !important; font-size: 2rem; font-weight: 700; color: var(--kt-gold-pale); } .hero-stat-label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); margin-top: 2px; letter-spacing: 0.04em; } /* ── SECTION SHARED ELEMENTS ─────────────────────────────── */ .section-label { font-family: var(--kt-font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kt-gold); margin-bottom: 14px; } .section-title { font-family: var(--kt-font-display) !important; font-size: clamp(1.9rem, 3.5vw, 2.8rem); color: var(--kt-black); line-height: 1.2; margin-bottom: 20px; } .section-body { font-size: 1.05rem; color: var(--kt-text-mid); line-height: 1.75; max-width: 620px; } /* ── PROBLEM SECTION ─────────────────────────────────────── */ .problem-section { background: var(--kt-off-white); padding: 100px 0; } .pain-card { background: #fff; border-radius: 12px; padding: 28px; border-left: 4px solid var(--kt-gold); box-shadow: 0 2px 16px rgba(34, 30, 31, 0.06); height: 100%; transition: transform 0.2s, box-shadow 0.2s; } .pain-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(34, 30, 31, 0.11); } .pain-card-icon { font-size: 1.6rem; color: var(--kt-gold); margin-bottom: 14px; } .pain-card h5 { font-family: var(--kt-font-body) !important; font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; color: var(--kt-black); } .pain-card p { font-size: 0.88rem; color: var(--kt-text-mid); line-height: 1.6; margin: 0; } /* ── SERVICES ────────────────────────────────────────────── */ .services-section { padding: 100px 0; background: #fff; } .service-tier { border: 1px solid var(--kt-warm-gray); border-radius: 16px; padding: 40px 36px; height: 100%; position: relative; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; } .service-tier:hover { border-color: var(--kt-black-light); box-shadow: 0 12px 48px rgba(34, 30, 31, 0.12); transform: translateY(-6px); } .service-tier.featured { background: var(--kt-black); border-color: var(--kt-black); color: #fff; } .service-tier.featured .tier-name, .service-tier.featured .tier-title, .service-tier.featured .tier-price, .service-tier.featured .tier-desc { color: #fff !important; } .service-tier.featured .tier-feature { color: rgba(255, 255, 255, 0.75); } .service-tier.featured .tier-feature i { color: var(--kt-gold-pale) !important; } .service-tier.featured .tier-feature { border-bottom-color: rgba(255, 255, 255, 0.1) !important; } .featured-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--kt-gold); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 18px; border-radius: 100px; white-space: nowrap; } .tier-name { font-family: var(--kt-font-body) !important; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kt-gold); margin-bottom: 10px; } .tier-title { font-family: var(--kt-font-display) !important; font-size: 1.4rem; color: var(--kt-black); margin-bottom: 8px; } .tier-price { font-size: 0.9rem; color: var(--kt-text-mid); margin-bottom: 20px; line-height: 1.5; } .tier-price strong { font-size: 1.5rem; color: var(--kt-black); font-family: var(--kt-font-body) !important; font-weight: 700; } .tier-desc { font-size: 0.88rem; color: var(--kt-text-mid); line-height: 1.65; margin-bottom: 24px; } .tier-features { list-style: none; padding: 0; margin: 0 0 28px; } .tier-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--kt-text-mid); padding: 7px 0; border-bottom: 1px solid var(--kt-warm-gray); } .tier-feature:last-child { border-bottom: none; } .tier-feature i { color: var(--kt-gold); margin-top: 2px; flex-shrink: 0; } .btn-tier { display: block; text-align: center; padding: 12px 24px; border-radius: 8px; font-family: var(--kt-font-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: all 0.2s; } .btn-tier-dark { background: var(--kt-black); color: #fff !important; } .btn-tier-dark:hover { background: var(--kt-black-mid); color: #fff !important; } .btn-tier-gold { background: var(--kt-gold); color: #fff !important; box-shadow: 0 4px 16px rgba(173, 151, 78, 0.3); } .btn-tier-gold:hover { background: var(--kt-gold-light); color: #fff !important; } .btn-tier-outline { border: 2px solid rgba(255, 255, 255, 0.3); color: #fff !important; background: transparent; } .btn-tier-outline:hover { border-color: var(--kt-gold-pale); color: var(--kt-gold-pale) !important; } /* ── CASE STUDY ──────────────────────────────────────────── */ .casestudy-section { background: var(--kt-black); padding: 100px 0; position: relative; overflow: hidden; } .casestudy-section::before { content: ''; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(173, 151, 78, 0.12) 0%, transparent 70%); border-radius: 50%; } .quote-mark { font-family: var(--kt-font-display) !important; font-size: 6rem; color: var(--kt-gold); opacity: 0.3; line-height: 1; margin-bottom: -20px; } .testimonial-text { font-family: var(--kt-font-display) !important; font-size: clamp(1.2rem, 2.5vw, 1.6rem); color: #fff; line-height: 1.55; font-style: italic; margin-bottom: 32px; } .testimonial-attr { display: flex; align-items: center; gap: 14px; } .attr-avatar { width: 44px; height: 44px; background: var(--kt-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 1rem; flex-shrink: 0; } .attr-name { font-weight: 600; color: #fff; font-size: 0.9rem; } .attr-title { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); } .before-after { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 32px; } .ba-label { font-family: var(--kt-font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } .ba-before .ba-label { color: #ff7c7c; } .ba-after .ba-label { color: #7cefb4; } .ba-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); padding: 7px 0; font-family: var(--kt-font-body); } .ba-item i { margin-top: 2px; flex-shrink: 0; } .ba-before .ba-item i { color: #ff7c7c; } .ba-after .ba-item i { color: #7cefb4; } .ba-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 20px 0; } /* ── PROCESS ─────────────────────────────────────────────── */ .process-section { padding: 100px 0; background: var(--kt-off-white); } .process-step { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid var(--kt-warm-gray); } .process-step:last-child { border-bottom: none; } .step-num { font-family: var(--kt-font-display) !important; font-size: 3rem; font-weight: 900; color: var(--kt-gold); opacity: 0.25; line-height: 1; min-width: 60px; } .step-content h4 { font-family: var(--kt-font-body) !important; font-weight: 700; color: var(--kt-black); margin-bottom: 6px; } .step-content p { font-size: 0.92rem; color: var(--kt-text-mid); line-height: 1.7; margin: 0; } /* ── ABOUT ───────────────────────────────────────────────── */ .about-section { padding: 100px 0; background: #fff; } .about-card { background: var(--kt-off-white); border-radius: 16px; padding: 40px; } .about-skills-heading { font-family: var(--kt-font-body) !important; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kt-text-light); margin-bottom: 10px; } .about-skill-item { display: flex; gap: 12px; align-items: flex-start; } .about-skill-item i { color: var(--kt-gold); font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; } .about-skill-label { font-family: var(--kt-font-body); font-weight: 600; font-size: 0.9rem; color: var(--kt-black); } .about-skill-desc { font-family: var(--kt-font-body); font-size: 0.82rem; color: var(--kt-text-mid); } .skill-tag { display: inline-block; background: #fff; border: 1px solid var(--kt-warm-gray); color: var(--kt-black-mid); font-family: var(--kt-font-body); font-size: 0.8rem; font-weight: 500; padding: 5px 14px; border-radius: 100px; margin: 4px; } .founder-quote { border-left: 4px solid var(--kt-gold); padding-left: 20px; font-style: italic; color: var(--kt-text-mid); font-size: 1rem; line-height: 1.7; margin-top: 28px; } /* ── CTA / CONTACT ───────────────────────────────────────── */ .cta-section { background: var(--kt-black); padding: 100px 0; text-align: center; position: relative; overflow: hidden; } .cta-section::after { content: ''; position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(173, 151, 78, 0.15) 0%, transparent 70%); border-radius: 50%; } .cta-section .section-label { color: var(--kt-gold-pale); } .cta-section h2 { font-family: var(--kt-font-display) !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: #fff; margin-bottom: 16px; } .cta-section > .container > p { font-size: 1.05rem; color: rgba(255, 255, 255, 0.65); max-width: 540px; margin: 0 auto 36px; line-height: 1.7; } .cta-booking { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 40px; max-width: 540px; margin: 0 auto; position: relative; z-index: 2; } .cta-booking h4 { font-family: var(--kt-font-body) !important; font-weight: 600; color: #fff; margin-bottom: 20px; font-size: 1rem; } .form-control-dark { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; border-radius: 8px; padding: 12px 16px; font-size: 0.9rem; width: 100%; margin-bottom: 12px; font-family: var(--kt-font-body); transition: border-color 0.2s, background 0.2s; -webkit-appearance: none; appearance: none; } .form-control-dark::placeholder { color: rgba(255, 255, 255, 0.35); } .form-control-dark option { background: var(--kt-black); color: #fff; } .form-control-dark:focus { outline: none; border-color: var(--kt-gold); background: rgba(255, 255, 255, 0.1); } .form-row { display: flex; gap: 12px; } .form-row .form-control-dark { flex: 1; } /* ── FOOTER ──────────────────────────────────────────────── */ .site-footer { background: var(--kt-black-deep); color: rgba(255, 255, 255, 0.55); padding: 60px 0 32px; } .footer-logo img { height: 42px; margin-bottom: 14px; } .footer-tagline { font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); max-width: 260px; line-height: 1.6; } .footer-heading { font-family: var(--kt-font-body) !important; font-weight: 700; color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; } .footer-links a:hover { color: var(--kt-gold-pale); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 0.82rem; margin: 0; } .social-links { display: flex; gap: 12px; } .social-link { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 0.9rem; transition: background 0.2s, color 0.2s; } .social-link:hover { background: var(--kt-gold); color: #fff; } /* ── ANIMATIONS ──────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── CONFIRMATION PAGE ───────────────────────────────────── */ .confirmation-wrapper { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 5rem 1rem; background: var(--kt-off-white); } .confirmation-card { background: #ffffff; border-radius: 20px; box-shadow: 0 10px 48px rgba(34, 30, 31, 0.1); padding: 3.5rem 3rem; max-width: 580px; width: 100%; text-align: center; animation: cardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; border-top: 4px solid var(--kt-gold); } @keyframes cardIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .check-circle { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--kt-gold), var(--kt-gold-light)); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.75rem; box-shadow: 0 8px 28px rgba(173, 151, 78, 0.4); animation: popIn 0.55s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes popIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } } .check-circle i { font-size: 2.6rem; color: #fff; } .confirmation-card h1 { font-family: var(--kt-font-display) !important; font-size: 2rem; font-weight: 700; color: var(--kt-black) !important; margin-bottom: 0.6rem; letter-spacing: -0.01em; } .confirmation-card .subtitle { font-family: var(--kt-font-body); color: var(--kt-text-mid); font-size: 1rem; margin-bottom: 2rem; line-height: 1.65; } .summary-box { background: var(--kt-off-white); border-radius: 10px; padding: 1.4rem 1.6rem; margin-bottom: 2rem; text-align: left; border-left: 3px solid var(--kt-gold); } .summary-box .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; font-family: var(--kt-font-body); font-size: 0.92rem; color: var(--kt-black); border-bottom: 1px solid var(--kt-warm-gray); } .summary-box .summary-row:last-child { border-bottom: none; font-weight: 700; padding-top: 0.65rem; } .summary-box .summary-row span.label { color: var(--kt-text-light); font-weight: 400; } .next-steps { text-align: left; margin-bottom: 2rem; } .next-steps h6 { font-family: var(--kt-font-body) !important; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kt-text-light); margin-bottom: 1rem; } .step-item { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 0.9rem; } .step-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; } .step-icon.gold { background: rgba(173, 151, 78, 0.12); color: var(--kt-gold); } .step-icon.dark { background: rgba(34, 30, 31, 0.08); color: var(--kt-black); } .step-icon.green { background: #f0fdf4; color: #16a34a; } .step-text strong { display: block; font-family: var(--kt-font-body); font-size: 0.9rem; color: var(--kt-black); font-weight: 600; } .step-text span { font-family: var(--kt-font-body); font-size: 0.82rem; color: var(--kt-text-mid); } .btn-home { display: inline-block; padding: 0.8rem 2.2rem; border-radius: 8px; font-family: var(--kt-font-body); font-weight: 600; font-size: 0.93rem; text-decoration: none; transition: all 0.22s ease; } .btn-home.primary { background: var(--kt-gold); color: #fff !important; box-shadow: 0 4px 18px rgba(173, 151, 78, 0.38); } .btn-home.primary:hover { background: var(--kt-gold-light); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(173, 151, 78, 0.48); color: #fff !important; } .btn-home.secondary { border: 1.5px solid var(--kt-warm-gray); color: var(--kt-text-mid) !important; margin-left: 0.75rem; background: transparent; } .btn-home.secondary:hover { border-color: var(--kt-gold); color: var(--kt-gold) !important; } .paypal-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--kt-font-body); font-size: 0.76rem; color: var(--kt-text-light); margin-top: 1.5rem; } .paypal-badge i { font-size: 0.88rem; color: #0070ba; } .status-complete { color: #16a34a !important; font-weight: 600; } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 768px) { .hero-stats { gap: 28px; } .form-row { flex-direction: column; gap: 0; } .header-nav a:not(.btn-cta) { display: none; } .process-step { flex-direction: column; gap: 8px; } .step-num { font-size: 2rem; min-width: auto; } .cta-booking { padding: 28px 20px; } .about-card { padding: 28px 22px; } .confirmation-card { padding: 2rem 1.5rem; } .btn-home.secondary { margin-left: 0; margin-top: 0.5rem; } }