354 lines
11 KiB
HTML
354 lines
11 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}B42-Play it real{% endblock %}</title>
|
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180"
|
|
href="{% static 'img/apple-touch-icon.png' %}">
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32"
|
|
href="{% static 'img/favicon-32x32.png' %}">
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16"
|
|
href="{% static 'img/favicon-16x16.png' %}">
|
|
|
|
<link rel="manifest"
|
|
href="{% static 'img/site.webmanifest' %}">
|
|
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#0056D2',
|
|
'brand-green': '#28A745',
|
|
'brand-purple': '#6F42C1',
|
|
'navy': '#0A1D3A',
|
|
'text-dark': '#333333',
|
|
'text-gray': '#3A3A3A',
|
|
'text-light': '#6C757D',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
|
|
poppins: ['Poppins', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Google Fonts: Poppins & Inter -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- Font Awesome Icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
|
|
<style>
|
|
/* -------------------------------------------
|
|
ROOT VARIABLES (Updated & Clean)
|
|
-------------------------------------------- */
|
|
:root {
|
|
/* Brand Colors */
|
|
--color-navy: #0A1D3A;
|
|
--color-green: #28A745;
|
|
--color-green-dark: #1F8A38;
|
|
--color-blue: #0056D2;
|
|
--color-purple: #6F42C1;
|
|
|
|
/* Text Colors */
|
|
--color-text-dark: #333333;
|
|
--color-text-gray: #3A3A3A;
|
|
--color-text-light: #6C757D;
|
|
|
|
/* Neutral */
|
|
--color-white: #ffffff;
|
|
--color-gray-50: #f9fafb;
|
|
--color-gray-900: #111827;
|
|
|
|
/* Shadows */
|
|
--shadow-soft: rgba(0, 0, 0, 0.08);
|
|
--shadow-medium: rgba(0, 0, 0, 0.15);
|
|
|
|
/* Button Defaults */
|
|
--btn-radius: 14px;
|
|
--btn-transition: all 0.3s ease;
|
|
}
|
|
|
|
/* -------------------------------------------
|
|
GLOBAL BASE
|
|
-------------------------------------------- */
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
color: var(--color-text-dark);
|
|
line-height: 1.6;
|
|
background-color: var(--color-gray-50);
|
|
}
|
|
|
|
/* -------------------------------------------
|
|
TYPOGRAPHY CLASSES (Reusable across site)
|
|
-------------------------------------------- */
|
|
|
|
/* Hero Heading (H1) */
|
|
.hero-heading {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
letter-spacing: 0.2px;
|
|
|
|
color: var(--color-navy);
|
|
}
|
|
@media (min-width: 640px) {
|
|
.hero-heading { font-size: 3.5rem; } /* ~56px */
|
|
}
|
|
@media (min-width: 768px) {
|
|
.hero-heading { font-size: 4rem; } /* ~64px */
|
|
}
|
|
@media (max-width: 639px) {
|
|
.hero-heading { font-size: 2rem; } /* ~32px */
|
|
}
|
|
|
|
/* Hero Subheading (H2) */
|
|
.hero-subheading {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
color: var(--color-text-gray);
|
|
}
|
|
@media (min-width: 640px) {
|
|
.hero-subheading { font-size: 1.5rem; } /* 24px */
|
|
}
|
|
@media (max-width: 639px) {
|
|
.hero-subheading { font-size: 1.125rem; } /* 18px */
|
|
}
|
|
|
|
/* Section Title (e.g., "Choose Where to Incorporate") */
|
|
.section-title {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
letter-spacing: 0.2px;
|
|
text-align: center;
|
|
color: var(--color-navy);
|
|
}
|
|
@media (min-width: 640px) {
|
|
.section-title { font-size: 2.75rem; } /* ~44px */
|
|
}
|
|
@media (max-width: 639px) {
|
|
.section-title { font-size: 1.875rem; } /* ~30px */
|
|
}
|
|
|
|
/* Card Title (H3 inside cards) */
|
|
.card-title {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
color: var(--color-navy);
|
|
}
|
|
@media (min-width: 640px) {
|
|
.card-title { font-size: 1.75rem; } /* ~28px */
|
|
}
|
|
@media (max-width: 639px) {
|
|
.card-title { font-size: 1.375rem; } /* ~22px */
|
|
}
|
|
|
|
/* Sub-items / Tags (e.g., Pvt Ltd | LLP | OPC) */
|
|
.card-tags {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.1px;
|
|
color: var(--color-blue);
|
|
}
|
|
@media (min-width: 640px) {
|
|
.card-tags { font-size: 1.125rem; } /* 18px */
|
|
}
|
|
@media (max-width: 639px) {
|
|
.card-tags { font-size: 1rem; } /* 16px */
|
|
}
|
|
|
|
/* Card Description / Body Text */
|
|
.card-description, .body-text {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
color: var(--color-text-gray);
|
|
}
|
|
@media (min-width: 640px) {
|
|
.card-description, .body-text { font-size: 1.125rem; } /* 18px */
|
|
}
|
|
@media (max-width: 639px) {
|
|
.card-description, .body-text { font-size: 1rem; } /* 16px */
|
|
}
|
|
|
|
/* Caption / Trust Line */
|
|
.caption-text {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
color: var(--color-text-light);
|
|
}
|
|
@media (min-width: 640px) {
|
|
.caption-text { font-size: 0.875rem; } /* 14px */
|
|
}
|
|
@media (max-width: 639px) {
|
|
.caption-text { font-size: 0.8125rem; } /* 13px */
|
|
}
|
|
|
|
/* -------------------------------------------
|
|
BUTTON CLASSES (Reusable)
|
|
-------------------------------------------- */
|
|
|
|
.btn-cta {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 500;
|
|
border-radius: var(--btn-radius);
|
|
padding: 0.75rem 1.75rem;
|
|
text-align: center;
|
|
transition: var(--btn-transition);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.btn-cta { font-size: 1.125rem; } /* 18px */
|
|
}
|
|
@media (max-width: 639px) {
|
|
.btn-cta { font-size: 1rem; } /* 16px */
|
|
}
|
|
|
|
.btn-primary-green {
|
|
background-color: var(--color-green);
|
|
color: var(--color-white);
|
|
}
|
|
.btn-primary-green:hover {
|
|
background-color: var(--color-green-dark);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.btn-primary-blue {
|
|
background-color: var(--color-blue);
|
|
color: white;
|
|
}
|
|
.btn-primary-blue:hover {
|
|
background-color: #0044a8;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.btn-primary-purple {
|
|
background-color: var(--color-purple);
|
|
color: var(--color-white);
|
|
}
|
|
.btn-primary-purple:hover {
|
|
background-color: #5a32a3;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.btn-secondary-blue {
|
|
background-color: var(--color-white);
|
|
color: var(--color-blue);
|
|
border: 2px solid var(--color-blue);
|
|
}
|
|
.btn-secondary-blue:hover {
|
|
background-color: var(--color-blue);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
/* -------------------------------------------
|
|
CARD STYLES
|
|
-------------------------------------------- */
|
|
.service-card {
|
|
background: var(--color-white);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
box-shadow: 0 6px 18px var(--shadow-soft);
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
.service-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 12px 24px var(--shadow-medium);
|
|
}
|
|
|
|
.service-card-grid {
|
|
display: grid;
|
|
gap: 2.5rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
}
|
|
|
|
/* -------------------------------------------
|
|
LAYOUT UTILITIES
|
|
-------------------------------------------- */
|
|
.section-padding {
|
|
padding: clamp(40px, 6vw, 80px) 0;
|
|
}
|
|
|
|
.max-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
/* Back to top animation (kept from original) */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-50">
|
|
<!-- Header -->
|
|
<header>
|
|
{% include "includes/public_navbar.html" %}
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="min-h-screen">
|
|
{% block content %}
|
|
{% endblock %}
|
|
</main>
|
|
|
|
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
{% include "includes/footer.html" %}
|
|
</footer>
|
|
|
|
<!-- Back to Top Button -->
|
|
<button id="backToTop" class="fixed bottom-6 right-6 bg-indigo-600 text-white p-3 rounded-full shadow-lg transition-all duration-300 z-40 hidden">
|
|
<i class="fas fa-chevron-up"></i>
|
|
</button>
|
|
|
|
|
|
<script>
|
|
// Back to top functionality
|
|
const backToTop = document.getElementById('backToTop');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 300) {
|
|
backToTop.classList.remove('hidden');
|
|
} else {
|
|
backToTop.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
backToTop.addEventListener('click', () => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |