/* =============================== International Conference Brand Setup =============================== */ /* Font Faces (Manual Load) */ @font-face { font-family: 'FiraSansExtraCondensed'; src: url('../fonts/FiraSansExtraCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'FiraSansExtraCondensed'; src: url('../fonts/FiraSansExtraCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'FiraSansExtraCondensed'; src: url('../fonts/FiraSansExtraCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } /* ================================================================== THEPURULIA.COM — Brand CSS (v1.0) ------------------------------------------------------------------ Purpose: Modern, scalable CSS foundation using CSS Custom Properties with a light/dark theme, utilities, and ready-to-use components (buttons, cards, nav, forms, badges, alerts). Notes: • Drop this file after a small reset/normalize. • Load fonts (see comments below) before this file. • Toggle dark mode by adding data-theme="dark" on . ================================================================== */ /* -------------------------------------------------- 1) CSS RESET (minimal, friendly) -------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4} body{margin:0;font-family:var(--font-sans);color:var(--text);background:var(--surface)} img,svg,video,canvas{display:block;max-width:100%;} .btn button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:none;!important} /* -------------------------------------------------- 2) BRAND TOKENS — COLORS, TYPOGRAPHY, SCALES -------------------------------------------------- */ :root { /* ======================== Brand Core ======================== */ --brand: #0b5d2a; /* Rich evergreen (base) */ --brand-700: #084422; /* Darker / active */ --brand-600: #0f7a38; /* Primary hover / buttons */ --brand-400: #28b463; /* Bright accent green */ --brand-200: #a9e5c1; /* Soft highlight */ --brand-50: #f3fcf7; /* Subtle background tint */ /* ======================== Folk Accent Palette ======================== */ --accent-red: #e63946; /* Festive Energy */ --accent-orange: #f3722c; /* Warmer cultural tone */ --accent-yellow: #f9c74f; /* Celebration / Callouts */ --accent-green: #65a30d; /* Balanced nature */ --accent-blue: #277da1; /* Sky / Balance */ /* ======================== Gradients ======================== */ --brand-gradient: linear-gradient(135deg, var(--brand-600), var(--brand-400)); --accent-gradient: linear-gradient(135deg, var(--accent-orange), var(--accent-yellow)); /* ======================== Neutral System ======================== */ --ink-900: #0d1512; /* Deepest text */ --ink-800: #1b2f26; /* Charcoal navy-green */ --ink-700: #2f4238; --ink-500: #51625a; --ink-300: #9aa8a0; --ink-200: #c8d3ce; --ink-100: #e7edeb; --white: #ffffff; /* ======================== Surfaces ======================== */ --surface: #ffffff; /* page bg */ --surface-muted: #f8faf9; /* subtle sections */ --surface-elev: #ffffff; /* elevated cards */ --border: #e0e6e3; --shadow: 0 8px 30px rgba(1,44,24,0.12), 0 2px 6px rgba(1,44,24,0.08); /* ======================== Text ======================== */ --text: #1b2f26; /* Default text */ --text-muted: #51625a; /* Secondary text */ --link: var(--brand-600); --link-hover: var(--brand-400); /* ======================== Status ======================== */ --ok: #16a34a; /* green */ --warn: #f59e0b; /* amber */ --err: #ef4444; /* red */ --info: #3b82f6; /* blue */ /* ======================== Typography ======================== */ --font-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Noto Sans Bengali", "Hind Siliguri", Arial, sans-serif; --font-bn: "Noto Sans Bengali", "Hind Siliguri", "SolaimanLipi", sans-serif; --font-FiraSans: "FiraSansExtraCondensed"; /* ======================== Scale ======================== */ --radius-xs: .375rem; /* 6px */ --radius: .75rem; /* 12px */ --radius-lg: 1.25rem; /* 20px */ --radius-2xl: 1.5rem; /* 24px */ --gap-1: .25rem; --gap-2: .5rem; --gap-3: .75rem; --gap-4: 1rem; --gap-5: 1.25rem; --gap-6: 1.5rem; --gap-8: 2rem; --gap-10: 2.5rem; --gap-12: 3rem; --container: 1400px; } /* -------------------------------------------------- 3) LAYOUT HELPERS -------------------------------------------------- */ .container{width:min(100%,var(--container));margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)} .section{padding:clamp(2rem,5vw,4rem) 0} .grid{display:grid;gap:var(--gap-6)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}} .flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4{gap:var(--gap-4)}.gap-6{gap:var(--gap-6)} /* -------------------------------------------------- 4) TYPOGRAPHY UTILITIES -------------------------------------------------- */ h1 { font-family: var(--font-FiraSans); font-weight: 700 !important; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.02rem; } h2 { font-family: var(--font-FiraSans); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.25rem); } h3 { font-family: var(--font-FiraSans); font-weight: 600 !important; font-size: clamp(1.25rem, 2vw, 1.5rem); } h4 { font-family: var(--font-FiraSans); font-weight: 500; } h5 { font-family: var(--font-FiraSans); } .lead {font-size:clamp(1.05rem,1.4vw,1.15rem);color:var(--text-muted)} .small {font-size:.875rem;color:var(--text-muted)} .bn {font-family:var(--font-bn)} a { text-decoration: none; } /* -------------------------------------------------- 5) DECOR — BADGES, CHIPS, TAGS -------------------------------------------------- */ .badge { display:inline-flex;align-items:center;gap:.5ch; padding:.35rem .6rem;border-radius:999px; border:1px solid var(--border); background:var(--surface-muted); color:var(--text-muted); font-weight:600;font-size:.75rem } .badge.brand { border-color:transparent; background:var(--brand-50); color:var(--brand-600) } .badge.success { background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok);border-color:transparent } .badge.warn { background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn);border-color:transparent } /* -------------------------------------------------- 6) BUTTONS -------------------------------------------------- */ .btn { --btn-bg: var(--surface-elev); --btn-fg: var(--text); --btn-bd: var(--border); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.2rem; /* balanced padding */ border-radius: var(--radius); border: none; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: .95rem; line-height: 1; cursor: pointer; transition: all .25s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .btn:hover { transform: translateY(-2px); /* more noticeable lift */ box-shadow: 0 3px 6px rgba(0,0,0,0.08); } .btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } /* Variants */ .btn-primary { --btn-bg: var(--brand-700); --btn-fg: #fff; --btn-bd: transparent; } .btn-primary:hover { background: var(--brand-700); } .btn-outline { --btn-bg: transparent; --btn-bd: var(--brand-600); --btn-fg: var(--brand-600); border: var(--brand-700) solid 1px; } .btn-outline:hover { background: var(--brand-700); color: var(--white); } .btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-muted); } .btn-ghost:hover { background: var(--brand-50); color: var(--brand-600); } .btn-pill { border-radius: 999px; } /* Icon button */ .icon-btn { width:2.5rem;height:2.5rem; display:inline-grid;place-items:center; border-radius:999px;border:1px solid var(--border); background:var(--surface-elev);transition:.2s } .icon-btn:hover {background:var(--brand-50);color:var(--brand-600)} /* -------------------------------------------------- 7) CARD, ELEVATION, PANELS -------------------------------------------------- */ .card { background:var(--surface-elev);border:1px solid var(--border); border-radius:var(--radius-2xl);box-shadow:var(--shadow); padding:clamp(1rem,2.2vw,1.5rem);transition:.25s ease } .card.hover:hover {transform:translateY(-3px)} /* ================================ NAVBAR STYLING ================================ */ /* Glass Navbar */ #mainNav { position: sticky; top: 0; z-index: 989; /* higher than offcanvas */ backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--border); padding: 0.8rem 0; transition: all 0.3s ease; } #mainNav.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow); padding: 0.5rem 0; } /* Base nav link */ #mainNav .nav-link { font-weight: 700; font-size: 1rem; color: var(--ink-800); position: relative; padding: .25rem 0; transition: color .25s ease; text-decoration: none; text-transform: uppercase; } /* Hover + active underline effect */ #mainNav .nav-link { position: relative; } #mainNav .nav-link::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 60%; height: 1px; background: var(--brand-400); opacity: 0; transform: translateX(-50%) translateY(4px); transition: all .3s ease; } #mainNav .nav-link:hover::after, #mainNav .nav-link.active::after { opacity: 1; transform: translateX(-50%) translateY(0); } #mainNav .nav-link:hover, #mainNav .nav-link:focus { color: var(--brand-600); } /* Smooth transition for active */ #mainNav .nav-link.active { font-weight: 600; color: var(--brand-700); } /* ================================ ACCOUNT DROPDOWN ================================ */ .account-btn { width: 30px; /* fixed circle size */ height: 30px; border-radius: 50%; background: var(--brand-700); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--white); transition: background .2s, color .2s; text-decoration: none; /* remove underline */ } .account-btn:hover { background: var(--brand-600); color: var(--white); } .account-btn i { font-size: 1.2rem; /* icon size */ line-height: 1; pointer-events: none; /* prevent icon blocking clicks */ } /* ================================ OFFCANVAS MENU (80% width) ================================ */ .modern-offcanvas { background: var(--surface-elev); box-shadow: var(--shadow); border-radius: var(--radius-lg) 0 0 var(--radius-lg); transition: transform .3s ease-in-out; padding: 1.5rem 1rem; width: 80% !important; max-width: 360px; z-index: 1150; } .modern-offcanvas .offcanvas-header { border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .modern-offcanvas .nav-link { font-size: 1.1rem; font-weight: 500; padding: .5rem 0; color: var(--ink-800); } .modern-offcanvas .nav-link:hover { color: var(--brand-600); } /* ================================ Hero Section ================================ */ .hero-slider { position: relative; width: 100%; height: 95vh; overflow: hidden; } .hero-slide { width: 100%; height: 95vh; background-size: cover; background-position: center; position: relative; display: flex !important; align-items: center; /* vertical center */ justify-content: center; /* horizontal center */ padding: 0 5%; text-align: center; /* center text too */ } /* Content Box */ .hero-overlay { max-width: 600px; padding: 2rem; background: transparent; animation: slideFadeUp .8s ease; z-index: 2; } .hero-overlay h1 { font-family: var(--font-FiraSans), sans-serif; letter-spacing: 1.2px; font-size: 2.8rem; font-weight: 700; color: #fff; text-shadow: 2px 2px 6px rgba(0,0,0,0.7); margin-bottom: 1rem; } .hero-overlay p { font-size: 1.1rem; margin-bottom: 1.5rem; color: #fff; text-shadow: 1px 1px 4px rgba(0,0,0,0.6); } /* Animations */ @keyframes slideFadeUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* ================================ Responsive Adjustments ================================ */ @media (max-width: 768px) { .hero-slide { justify-content: center; /* center content on mobile */ padding: 1rem; height: auto; /* let slide height fit content */ min-height: 80vh; } .hero-overlay { margin-top: 100px; text-align: center; color: #fff; } .hero-overlay h1 { font-size: 2rem; } .hero-overlay p { font-size: 1rem; } } .info-section { margin-top: -150px; position: relative; color: var(--white); } .info-card { background: var(--brand-700); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; color: var(--white); text-align: center; } .info-card i { color: var(--accent-yellow); } .info-card:hover { transform: translateY(-10px); box-shadow: 0 12px 24px rgba(0,0,0,0.35); } /* Force paragraph to max 3 lines */ .card-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* About Purulia */ .infobox { border: 1px solid #ccc; background: #f9f9f9; font-size: 0.9rem; line-height: 1.4; width: 100%; } .infobox-title { background: #4a76d4; color: #fff; font-weight: bold; text-align: center; padding: 0.5rem; font-size: 1.2rem; } .infobox-subtitle { background: #eaf0fa; color: #333; text-align: center; padding: 0.4rem; font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid #ccc; } .about-us p { text-align: justify; text-justify: inter-word; /* ensures proper spacing between words */ } .quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; /* spacing between buttons */ } .quick-btn { background: var(--brand-700); color: var(--white); border: none; padding: 0.6rem 1.2rem; border-radius: var(--radius); cursor: pointer; font-weight: 600; transition: all 0.3s ease; min-width: 120px; text-align: center; } .quick-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .quick-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(40,180,99,0.4); } .infobox-image { display: flex; flex-direction: column; /* stack image and caption vertically */ justify-content: center; /* vertical alignment if needed */ align-items: center; /* horizontal centering */ padding: 0.5rem; text-align: center; /* ensures caption is centered */ } .infobox-image img { max-width: 100%; height: auto; border: 1px solid #ccc; background: #fff; display: block; border-radius: 0.5rem; margin-bottom: 0.5rem; /* space between image and caption */ } .infobox-caption { font-size: 0.75rem; color: #555; line-height: 1.4; max-width: 100%; } .infobox-table { width: 100%; border-collapse: collapse; margin: 0; } .infobox-table th { text-align: left; font-weight: 600; width: 40%; padding: 4px 6px; border-top: 1px solid #ddd; } .infobox-table td { padding: 4px 6px; border-top: 1px solid #ddd; } .promotions-section { position: relative; background-color: #f3f7f9; padding: 150px 0; text-align: center; overflow: hidden; min-height: 300px; } .fade-content { position: absolute; /* stack on top of each other */ top: 50%; left: 50%; transform: translate(-50%, 20px); opacity: 0; transition: all 0.8s ease; width: 100%; max-width: 700px; } .fade-content.active { opacity: 1; transform: translate(-50%, -50%); z-index: 2; } .promotions-section h2 { color: #0b3d18; font-weight: 700; } .promotions-section p { color: #374151; } .promotions-section .promotion-btn { background-color: #65a30d; color: #fff; padding: 0.8rem 2rem; font-size: 1.2rem; font-weight: 600; border-radius: 50px; box-shadow: 0 6px 15px rgba(0,0,0,0.15); transition: all 0.3s ease; } .promotions-section .promotion-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0,0,0,0.2); background-color: var(--brand-700); } .footer-section { position: relative; background: url('../img/webs/footer-bg.webp') no-repeat center center/cover; color: #fff; overflow: hidden; } .footer-section .footer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.65); } .footer-section h5 { font-weight: 700; margin-bottom: 1rem; } .footer-section .footer-links li { margin-bottom: 0.5rem; } .footer-section .footer-links a { color: #fff; text-decoration: none; transition: all 0.3s ease; display: inline-block; position: relative; } .footer-section .footer-links a::after { content: ''; position: absolute; width: 0%; height: 2px; left: 0; bottom: -2px; background: #8bc34a; transition: all 0.3s ease; } .footer-section .footer-links a:hover::after { width: 100%; } .footer-section .footer-links a:hover { color: #8bc34a; } .footer-section .social-links a { font-size: 1.2rem; display: inline-block; margin-right: 0.5rem; transition: transform 0.3s ease, color 0.3s ease; } .footer-section .social-links a:hover { transform: translateY(-3px); color: #8bc34a; } .newsletter-wrapper { text-align: center !important; z-index: 10 !important; } .newsletter-form { display: flex !important; max-width: 420px !important; /* max container width */ margin: 0 auto !important; border-radius: 50px !important; overflow: hidden !important; background-color: #ffffff !important; box-shadow: 0 6px 15px rgba(0,0,0,0.1) !important; } .newsletter-input { flex: 1 1 auto !important; /* allow input to grow/shrink properly */ padding: 0.75rem 1.2rem !important; border: none !important; outline: none !important; font-size: 1rem !important; color: #374151 !important; } .newsletter-input::placeholder { color: #6b7280 !important; } .newsletter-btn { flex: 0 0 auto !important; /* prevent shrinking */ width: 120px !important; /* fixed width for consistent look */ padding: 0.75rem 1.2rem !important; background-color: #65a30d !important; color: #fff !important; font-weight: 600 !important; border: none !important; cursor: pointer !important; display: flex !important; justify-content: center !important; align-items: center !important; transition: all 0.3s ease !important; } .newsletter-btn i { font-size: 1rem !important; margin-left: 0.5rem !important; } .newsletter-btn:hover { background-color: var(--brand-700); !important; box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; } /* Floating Buttons Wrapper */ .floating-buttons { position: fixed; right: 15px; bottom: 30px; display: flex; flex-direction: column; gap: 12px; z-index: 9999; } /* Floating Button Base Style */ .floating-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: #0b3d18; color: #fff; border-radius: 50%; text-decoration: none; font-size: 1.5rem; transition: all 0.3s ease; box-shadow: 0 6px 15px rgba(0,0,0,0.2); overflow: hidden; } /* Label on hover */ .floating-btn .floating-label { position: absolute; right: 60px; background-color: #8bc34a; color: #fff; padding: 6px 12px; border-radius: 25px; white-space: nowrap; opacity: 0; pointer-events: none; font-size: 0.9rem; transition: all 0.3s ease; } .floating-btn:hover .floating-label { opacity: 1; pointer-events: auto; } /* WhatsApp specific color */ .floating-btn.whatsapp { background-color: #25d366; } .floating-btn.whatsapp:hover .floating-label { background-color: #128c7e; } /* Back to top specific color */ .floating-btn.back-to-top { background-color: #65a30d; } .floating-btn.back-to-top:hover .floating-label { background-color: var(--brand-700); } /* Mobile adjustments */ @media (max-width: 768px) { .floating-btn .floating-label { display: none; } } /* Modal Background (remove bootstrap backdrop look) */ .promo-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; /* no dark overlay */ z-index: 9999; justify-content: center; align-items: center; animation: fadeIn 0.4s ease; } /* Modal Box */ .promo-modal .promo-content { background: transparent; border-radius: 1rem; position: relative; max-width: 500px; width: 90%; animation: scaleUp 0.4s ease; box-shadow: 0 8px 28px rgba(0,0,0,0.25); /* branded shadow */ } /* Close Button */ .promo-close { position: absolute; top: 8px; /* inside the image */ right: 12px; font-size: 1.8rem; font-weight: bold; color: var(--white); /* brand color */ cursor: pointer; background: var(--brand-700); border-radius: 30%; width: 32px; height: 32px; line-height: 32px; text-align: center; transition: background 0.3s ease, color 0.3s ease; } .promo-close:hover { background: #000; color: #fff; } /* Image */ .promo-img { width: 100%; height: auto; border-radius: 0.75rem; } /* Animations */ @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes scaleUp { from {transform: scale(0.9);} to {transform: scale(1);} } .modal-backdrop { display: none !important; } /* -------------------------------------------------- 9) FORMS -------------------------------------------------- */ input, select, textarea { width:100%;padding:.75rem .9rem;border:1px solid var(--border); border-radius:var(--radius);background:var(--surface-elev);color:var(--text); transition:border-color .2s ease, box-shadow .2s ease } input:focus, select:focus, textarea:focus { border-color:var(--brand-600); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-600) 30%, transparent) } label {display:block;font-weight:600;margin-bottom:.4rem} .help {font-size:.8rem;color:var(--text-muted)} .switch {position:relative;width:46px;height:26px} .switch input { appearance:none;width:100%;height:100%; border-radius:999px;background:var(--ink-200); outline:none;cursor:pointer;transition:.2s } .switch input:checked {background:var(--brand-600)} .switch input::after { content:"";position:absolute;top:3px;left:3px;width:20px;height:20px; background:#fff;border-radius:50%;transition:.2s } .switch input:checked::after {left:23px} /* -------------------------------------------------- 10) TABLES -------------------------------------------------- */ .table {width:100%;border-collapse:separate;border-spacing:0; border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .table th,.table td {padding:.9rem 1rem;border-bottom:1px solid var(--border)} .table thead th {background:var(--surface-muted);text-align:left;font-weight:700} .table tbody tr:hover {background:color-mix(in srgb, var(--brand-50) 50%, transparent)} /* -------------------------------------------------- 11) ALERTS -------------------------------------------------- */ .alert {display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-elev)} .alert.ok {border-color:color-mix(in srgb,var(--ok) 40%, var(--border));background:color-mix(in srgb,var(--ok) 10%, var(--surface-elev));color:var(--ok)} .alert.warn {border-color:color-mix(in srgb,var(--warn) 40%, var(--border));background:color-mix(in srgb,var(--warn) 10%, var(--surface-elev));color:var(--warn)} .alert.err {border-color:color-mix(in srgb,var(--err) 40%, var(--border));background:color-mix(in srgb,var(--err) 10%, var(--surface-elev));color:var(--err)} .alert.info {border-color:color-mix(in srgb,var(--info) 40%, var(--border));background:color-mix(in srgb,var(--info) 10%, var(--surface-elev));color:var(--info)} /* -------------------------------------------------- 12) BRAND GRADIENTS & DECOR -------------------------------------------------- */ .bg-brand {background:var(--brand-600);color:#fff} .text-brand {color:var(--brand-600)} .gradient-brand { background:linear-gradient(135deg, var(--brand-600) 0%, color-mix(in srgb, var(--brand-400) 70%, var(--accent-blue)) 45%, color-mix(in srgb, var(--brand-400) 55%, var(--accent-green)) 100% );color:#fff } .ring-brand {box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-600) 25%, transparent)} .pill { display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem; border-radius:999px;background:var(--brand-50);color:var(--brand-600);font-weight:600; border:1px solid color-mix(in srgb, var(--brand-600) 25%, var(--border)) } /* -------------------------------------------------- 14) UTILITIES (spacing, radius, shadows) -------------------------------------------------- */ .mt-2{margin-top:var(--gap-2)}.mt-4{margin-top:var(--gap-4)}.mt-6{margin-top:var(--gap-6)}.mt-8{margin-top:var(--gap-8)} .mb-2{margin-bottom:var(--gap-2)}.mb-4{margin-bottom:var(--gap-4)}.mb-6{margin-bottom:var(--gap-6)} .p-4{padding:var(--gap-4)}.p-6{padding:var(--gap-6)} .rounded{border-radius:var(--radius)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-2xl{border-radius:var(--radius-2xl)} .shadow{box-shadow:var(--shadow)} /* -------------------------------------------------- 15) BRAND MARK -------------------------------------------------- */ .brand-mark{width:40px;height:auto} .brand-mark.sm{width:28px} .brand-mark.lg{width:56px} /* -------------------------------------------------- 17) TOAST -------------------------------------------------- */ .toast { position:fixed;right:1rem;bottom:1rem; display:flex;gap:.75rem;align-items:center;padding:.85rem 1rem; background:var(--surface-elev);border:1px solid var(--border); border-radius:var(--radius);box-shadow:var(--shadow) } /* -------------------------------------------------- 18) LOADING skeleton -------------------------------------------------- */ .skeleton {position:relative;overflow:hidden;background:var(--surface-muted);border-radius:var(--radius)} .skeleton::after { content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink-200) 45%, transparent), transparent); animation:skeleton 1.2s infinite } @keyframes skeleton {to{transform:translateX(100%)}} /* -------------------------------------------------- 19) MEDIA helpers -------------------------------------------------- */ .hide-sm{@media (max-width:700px){display:none!important}} .show-sm{@media (min-width:701px){display:none!important}} /* ========= Branded Ad Container ========= */ .brand-ad { position: relative; width: min(900px, 100%); margin: var(--gap-8) auto; border-radius: var(--radius-2xl); background: var(--surface); box-shadow: 0 12px 40px rgba(0,0,0,.08); overflow: hidden; isolation: isolate; padding: clamp(20px, 4vw, 40px); } /* Grid layout */ .brand-ad__inner { position: relative; z-index: 1; color: var(--text); display: grid; grid-template-columns: 1fr 320px; /* text | image */ align-items: center; gap: var(--gap-6); animation: slideIn 1s ease-out both; } /* Responsive fix for mobile */ @media (max-width: 768px) { .brand-ad__inner { grid-template-columns: 1fr; /* single column */ text-align: center; } .brand-ad__head { justify-content: center; } .brand-ad__cta-row { justify-content: center; } .brand-ad__media { margin-top: var(--gap-4); max-width: 400px; margin-left: auto; margin-right: auto; } } /* Glow background */ .brand-ad__glow { position: absolute; inset: -30%; background: radial-gradient(40% 40% at 20% 30%, var(--brand-200), transparent 70%), radial-gradient(50% 50% at 80% 70%, var(--accent-yellow), transparent 70%); filter: blur(60px); z-index: 0; opacity: .45; animation: floatGlow 20s ease-in-out infinite; pointer-events: none; } /* Badge */ .brand-ad__badge { display: inline-block; background: var(--accent-gradient); color: #000; font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 14px; border-radius: 999px; margin-bottom: var(--gap-3); box-shadow: 0 3px 10px rgba(0,0,0,.15); } /* Head row */ .brand-ad__head { display: flex; align-items: center; gap: var(--gap-2); margin-bottom: var(--gap-3); } .brand-ad__logo { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); } .brand-ad__kicker { font-size: 16px; font-weight: 600; letter-spacing: .08em; color: var(--brand-700); } /* Titles */ .brand-ad__title { margin: .25em 0; font-size: clamp(22px, 3vw, 34px); font-weight: 700; line-height: 1.2; background: var(--brand-700); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-ad__subtitle { font-size: clamp(14px, 2vw, 18px); color: var(--text-muted); margin-bottom: var(--gap-4); } /* CTA Row */ .brand-ad__cta-row { display: flex; align-items: center; gap: var(--gap-3); flex-wrap: wrap; margin-bottom: var(--gap-4); } .brand-ad__btn { padding: 8px 14px; border-radius: 999px; background: var(--brand-700); color: var(--white); font-weight: 700; text-decoration: none; transition: all .25s ease; box-shadow: 0 6px 16px rgba(0,0,0,.12); } .brand-ad__btn:hover { background: var(--brand-700); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,.18); } .brand-ad__link { color: var(--brand-600); font-weight: 500; text-underline-offset: 3px; } /* Media */ .brand-ad__media { border-radius: var(--radius-xl); overflow: hidden; animation: fadeIn 1.2s ease-out both; } .brand-ad__media img { display: block; width: 100%; height: auto; object-fit: cover; transform: scale(1.01); animation: imageFloat 12s ease-in-out infinite; } /* Hover shine effect */ .brand-ad__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%); transform: translateX(-100%); transition: transform 1s ease; } .brand-ad__media:hover::after { transform: translateX(100%); } /* Text animation */ .brand-ad__head, .brand-ad__title, .brand-ad__subtitle, .brand-ad__cta-row { opacity: 0; transform: translateX(-30px); animation: slideIn 0.8s ease-out forwards; } .brand-ad__head { animation-delay: 0.2s; } .brand-ad__title { animation-delay: 0.4s; } .brand-ad__subtitle { animation-delay: 0.6s; } .brand-ad__cta-row { animation-delay: 0.8s; } /* Animations */ @keyframes floatGlow { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.05); } } @keyframes imageFloat { 0%,100% { transform: scale(1.01) translateY(0); } 50% { transform: scale(1.03) translateY(-4px); } } @keyframes slideIn { 0% { opacity: 0; transform: translateX(-40px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* =============================== Global Legal / Policy Pages Premium Corporate Style ================================= */ /* Hero / Page Header with Brand Gradient + Background Image */ .page-hero { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)), url("../img/webs/page-header.webp") center/cover no-repeat; background-blend-mode: multiply; /* or overlay, soft-light, screen */ color: var(--white); margin: 40px auto; padding: var(--gap-12) var(--gap-6); text-align: center; border-radius: var(--radius-2xl); box-shadow: 0 12px 30px rgba(0,0,0,0.12); max-width: 1100px; position: relative; overflow: hidden; } /* Subtle highlight overlay */ .page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(255,255,255,0.15), transparent 60%); mix-blend-mode: overlay; pointer-events: none; } /* Hero Typography */ .page-hero h1 { font-size: 2.5rem; margin-bottom: var(--gap-2); font-weight: 700; letter-spacing: -0.8px; } .page-hero .effective-date { font-size: 1rem; opacity: 0.9; font-style: italic; } /* Breadcrumb */ .breadcrumb { margin-top: var(--gap-4); display: flex; justify-content: center; /* Center the breadcrumb */ align-items: center; gap: 8px; /* Equal space between items */ flex-wrap: wrap; /* Wrap nicely on mobile */ font-size: 0.95rem; } .breadcrumb a { color: var(--accent-yellow); text-decoration: none; font-weight: 600; transition: color 0.25s ease; } .breadcrumb a:hover { color: var(--white); text-decoration: underline; } .breadcrumb span { color: var(--white); font-weight: 600; } .breadcrumb i { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); /* softer separator */ margin: 0 4px; line-height: 1; } /* Main Body Container */ .page-body { max-width: 1100px; margin: var(--gap-12) auto; padding: 0 var(--gap-6); } /* Section Cards */ .page-body section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--gap-8) var(--gap-6); margin-bottom: var(--gap-10); box-shadow: 0 6px 18px rgba(0,0,0,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .page-body section:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); } /* Headings with Accent Bar */ .page-body h2 { color: var(--brand-700); font-size: 1.6rem; margin-bottom: var(--gap-4); font-weight: 600; position: relative; padding-left: 1rem; } .page-body h2::before { content: ""; position: absolute; left: 0; top: 0.4rem; width: 5px; height: 1.2rem; background: var(--brand-500); border-radius: 4px; } /* Paragraphs */ .page-body p { color: var(--ink-700); font-size: 1.05rem; line-height: 1.8; margin-bottom: var(--gap-4); } /* Strong Text */ .page-body strong { color: var(--ink-900); font-weight: 600; } /* Lists */ .page-body ul { padding-left: 1.5rem; margin: 0; } .page-body ul li { margin-bottom: 0.6rem; color: var(--ink-800); font-size: 1rem; line-height: 1.7; list-style: disc; } /* Section Divider Line (optional) */ .page-body section:not(:last-child)::after { content: ""; display: block; margin-top: var(--gap-8); border-bottom: 1px dashed var(--border); opacity: 0.6; } /* Responsive */ @media (max-width: 768px) { .page-hero { padding: var(--gap-8) var(--gap-4); margin: 20px auto; } .page-hero h1 { font-size: 1.8rem; } .page-body { padding: 0 var(--gap-4); } .page-body h2 { font-size: 1.3rem; } .page-body section { padding: var(--gap-5); } }