*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;padding-top:108px;padding-bottom:72px;font-family:"Segoe UI",Arial,sans-serif;color:#2f2022;background:radial-gradient(circle at 10% 10%,rgba(214,166,67,.10),transparent 28%),radial-gradient(circle at 90% 80%,rgba(127,18,38,.06),transparent 30%),linear-gradient(135deg,#fff8ed 0%,#fff1dc 48%,#fffaf4 100%)}
/* HEADER */
.top-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:10000;background:rgba(255,255,255,.98);border-bottom:4px solid #c9993a;box-shadow:0 6px 22px rgba(122,16,32,.12);backdrop-filter:blur(10px)}
.header-container{max-width:1240px;margin:0 auto;padding:10px 28px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.brand img{display:block;height:82px;width:auto;object-fit:contain}
.brand h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:32px;line-height:1.05;color:#7f1023}
.brand p{margin:7px 0 0;font-size:13px;color:#b8862d}
.main-nav{display:flex;align-items:center;gap:26px;white-space:nowrap}
.main-nav a{color:#7f1023;text-decoration:none;font-weight:700;font-size:15px;transition:color .2s ease,transform .2s ease}
.main-nav a:hover{color:#c28d28}
/* USER DROPDOWN */
.user-dropdown{position:relative;display:inline-block}
.user-dropbtn{border:none;cursor:pointer;padding:11px 20px;border-radius:999px;background:linear-gradient(135deg,#8d1126,#74101e);color:#fff;font-size:14px;font-weight:700;box-shadow:0 6px 16px rgba(122,16,32,.18)}
.user-dropbtn:hover{background:#c9993a}
.user-dropdown-content{display:none;position:absolute;right:0;top:48px;min-width:220px;overflow:hidden;background:#fff;border:1px solid #eedcbc;border-radius:13px;box-shadow:0 14px 34px rgba(0,0,0,.15);z-index:20000}
.user-dropdown-content.show{display:block}
.user-dropdown-content a{display:block;padding:14px 18px;border-bottom:1px solid #f3e6d1;color:#7f1023;text-decoration:none;font-weight:650}
.user-dropdown-content a:last-child{border-bottom:none}
.user-dropdown-content a:hover{background:#fff7e9;color:#c28d28}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 27px;margin:0;border:none;border-radius:999px;cursor:pointer;text-decoration:none;background:linear-gradient(135deg,#941329,#73101f);color:#fff;font-size:15px;font-weight:700;box-shadow:0 7px 18px rgba(122,16,32,.18);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-1px);background:#c9993a;box-shadow:0 10px 24px rgba(122,16,32,.22)}
.btn-gold{background:linear-gradient(135deg,#d3a23d,#bc8625)}
.btn-outline{background:#fff;color:#841225;border:1.5px solid #941329!important;box-shadow:none}
.btn-outline:hover{color:#fff;background:#841225}
/* HOME HERO */
.premium-hero{min-height:calc(100vh - 180px);padding:58px 28px 72px;display:grid;grid-template-columns:220px minmax(420px,820px) 220px;align-items:center;justify-content:center;gap:35px;background:linear-gradient(rgba(255,247,234,.78),rgba(255,242,221,.90)),url('/assets/images/weddingbg.png');background-size:cover;background-position:center;border-bottom:3px solid #c9993a}
.hero-image{overflow:hidden;background:#fff;border:3px solid rgba(201,153,58,.55);border-radius:24px;box-shadow:0 18px 45px rgba(0,0,0,.16)}
.hero-image img{display:block;width:100%;height:260px;object-fit:cover}
.hero-image-left{transform:rotate(-3deg)}
.hero-image-right{transform:rotate(3deg)}
.hero-content{max-width:850px;margin:0 auto;padding:48px 38px;text-align:center;background:rgba(255,255,255,.95);border:1px solid #eed19a;border-radius:28px;box-shadow:0 24px 70px rgba(122,16,32,.16)}
.hero-content h1{margin:0 0 18px;font-family:Georgia,"Times New Roman",serif;font-size:62px;line-height:1.05;color:#7d1022}
.telugu-line{margin-bottom:20px;color:#b98427;font-size:22px;font-weight:700}
.hero-main-text{margin:14px 0;font-family:Georgia,"Times New Roman",serif;font-size:34px;color:#2f2022}
.hero-sub-text{font-size:21px;color:#6b4b4b}
.brand-highlight{color:#7d1022;font-weight:800}
.hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:24px}
/* FEATURE CARDS */
.feature-section{max-width:1200px;margin:55px auto 90px;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{padding:30px;text-align:center;background:rgba(255,255,255,.97);border:1px solid #efdec2;border-top:5px solid #c9993a;border-radius:20px;box-shadow:0 14px 38px rgba(70,30,30,.07)}
.feature-card h3{margin-top:0;color:#7d1022;font-family:Georgia,"Times New Roman",serif}
/* LOGIN / REGISTER */
.form-box{width:min(520px,calc(100% - 32px));margin:55px auto 90px;padding:36px;background:rgba(255,255,255,.98);border:1px solid #efd9b6;border-top:5px solid #c9993a;border-radius:20px;box-shadow:0 16px 45px rgba(70,30,30,.09)}
.form-box h2{margin:0 0 10px;color:#7d1022;font-family:Georgia,"Times New Roman",serif;font-size:36px}
.form-subtitle{margin-bottom:28px;color:#705456;font-size:16px}
.form-box label{display:block;margin-bottom:8px;color:#6e1521;font-weight:700}
.form-box input,.form-box select,.form-box textarea{width:100%;margin-bottom:20px;padding:13px 14px;border:1px solid #d8c8bb;border-radius:10px;background:#fffdf9;font:inherit}
.form-box input:focus,.form-box select:focus,.form-box textarea:focus{outline:none;border-color:#c9993a;box-shadow:0 0 0 4px rgba(201,153,58,.14)}
.form-box button{width:100%}
.form-footer-link{margin-top:20px;text-align:center;color:#6b4b4b}
.form-footer-link a{color:#7a1020;text-decoration:none;font-weight:700}
/* MESSAGES */
.message-error{margin-bottom:22px;padding:15px 17px;background:#fff0f2;border:1px solid #f0c3ca;border-left:5px solid #a8172e;border-radius:11px;color:#a8172e}
.message-success{margin-bottom:22px;padding:15px 17px;background:#effbf3;border:1px solid #ccebd6;border-left:5px solid #25804a;border-radius:11px;color:#207442}
/* GENERAL PAGE SHELL */
.page-shell,.profile-form-shell,.profile-view-shell,.profile-page-wrap{position:relative;z-index:1;max-width:1180px;margin:42px auto 90px;padding:0 26px}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:30px;padding:32px 36px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,248,237,.98));border:1px solid #efd7a9;border-radius:22px;box-shadow:0 16px 42px rgba(83,26,30,.08)}
.page-heading h2{margin:0 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:36px;color:#831326}
.page-heading p{margin:0;color:#77605c;line-height:1.55}
/* PROFILE FORM */
.profile-form{display:flex;flex-direction:column;gap:28px}
.profile-form::before{content:"Complete each section carefully • You can save your profile and continue later";display:block;padding:14px 20px;border:1px solid #ecd19d;border-radius:12px;background:#fff5df;color:#725827;font-size:14px;font-weight:700}
.form-section{padding:32px 34px 36px;background:rgba(255,255,255,.98);border:1px solid #ead9c1;border-radius:22px;box-shadow:0 10px 35px rgba(60,22,25,.055)}
.form-section h3{margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid #f0dfc2;color:#811426;font-family:Georgia,"Times New Roman",serif;font-size:24px}
.form-section h3::after{content:"";display:block;width:58px;height:3px;margin-top:14px;border-radius:30px;background:linear-gradient(90deg,#8c1024,#d6a037)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:23px}
.form-grid .span-2{grid-column:1/-1}
.profile-form label{display:block;margin-bottom:8px;color:#482c30;font-size:14px;font-weight:700}
.profile-form input[type="text"],.profile-form input[type="email"],.profile-form input[type="date"],.profile-form input[type="number"],.profile-form input[type="tel"],.profile-form select,.profile-form textarea{display:block;width:100%;min-height:49px;padding:12px 14px;border:1px solid #d9cbbf;border-radius:11px;outline:none;background:#fffdf9;color:#3b292b;font-family:inherit;font-size:15px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.profile-form textarea{min-height:110px;line-height:1.55;resize:vertical}
.profile-form input:focus,.profile-form select:focus,.profile-form textarea:focus{border-color:#c99a38;background:#fff;box-shadow:0 0 0 4px rgba(201,154,56,.13)}
.profile-form input:required,.profile-form select:required{border-left:3px solid #a0172b}
.profile-form .field-error{border-color:#b5162f!important;background:#fff7f8!important;box-shadow:0 0 0 3px rgba(181,22,47,.08)}
.field-error-message{margin-top:7px;color:#b5162f;font-size:13px;font-weight:700}
/* CHECKBOXES */
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:28px 0}
.checkbox-grid label{display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px 15px;cursor:pointer;background:#fffaf2;border:1px solid #eadbc0;border-radius:12px;color:#52383b;font-weight:600}
.checkbox-grid input[type="checkbox"]{width:18px;height:18px;margin-top:1px;accent-color:#8b1024}
.form-actions,.dashboard-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:13px;margin-top:4px}
/* DASHBOARD */
/* =========================================================
PANIGRAHANAM FINAL HEADER / BACKGROUND / FOOTER
========================================================= */
/* ---------------------------------------------------------
GLOBAL BACKGROUND
--------------------------------------------------------- */
html {
min-height: 100%;
}
body {
margin: 0 !important;
min-height: 100vh;
/* fixed header space */
padding-top: 110px !important;
/* fixed footer space */
padding-bottom: 70px !important;
background:
radial-gradient(
circle at 10% 15%,
rgba(218, 168, 65, 0.13),
transparent 30%
),
radial-gradient(
circle at 90% 75%,
rgba(129, 16, 38, 0.08),
transparent 30%
),
linear-gradient(
135deg,
#fff8e8 0%,
#f9e9ce 48%,
#fff8ef 100%
) !important;
}
/* ---------------------------------------------------------
FIX HEADER
--------------------------------------------------------- */
.top-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99999 !important;
background:
rgba(255, 255, 255, 0.98) !important;
border-bottom:
4px solid #c9993a !important;
box-shadow:
0 6px 20px rgba(93, 27, 36, 0.13) !important;
}
/* HEADER SIZE */
.header-container {
max-width: 1240px !important;
margin:
0 auto !important;
padding:
10px 28px !important;
display: flex !important;
align-items: center !important;
justify-content:
space-between !important;
}
/* LOGO */
.brand img {
height:
80px !important;
width:
auto !important;
}
/* ---------------------------------------------------------
MAIN AREA
--------------------------------------------------------- */
main {
min-height:
calc(100vh - 180px);
background:
transparent !important;
}
/* ---------------------------------------------------------
HOME PAGE BACKGROUND
--------------------------------------------------------- */
.premium-hero {
min-height:
calc(100vh - 180px);
background:
linear-gradient(
135deg,
rgba(255, 248, 232, 0.88),
rgba(248, 230, 199, 0.90)
),
url('/assets/images/weddingbg.png')
!important;
background-size:
cover !important;
background-position:
center !important;
}
/* give profile/dashboard pages same warm background */
.page-shell,
.profile-form-shell,
.profile-page-wrap,
.profile-view-shell {
background:
transparent !important;
}
/* ---------------------------------------------------------
FIX FOOTER
--------------------------------------------------------- */
.site-footer {
position:
fixed !important;
left:
0 !important;
right:
0 !important;
bottom:
0 !important;
width:
100% !important;
height:
64px !important;
z-index:
99998 !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
padding:
0 20px !important;
margin:
0 !important;
background:
linear-gradient(
135deg,
#741020,
#97152e
)
!important;
border-top:
3px solid #d4a33e !important;
color:
#ffffff !important;
box-shadow:
0 -5px 18px rgba(83, 23, 30, 0.15) !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 768px) {
body {
padding-top:
170px !important;
padding-bottom:
72px !important;
}
.top-header {
position:
fixed !important;
}
.site-footer {
position:
fixed !important;
height:
64px !important;
}
}
/* =========================================================
PANIGRAHANAM - NEW LUXURY COLOUR THEME
Keep this at the VERY BOTTOM of style.css
========================================================= */
:root {
--primary: #6f1d3a;
--primary-dark: #511127;
--primary-light: #983f60;
--gold: #c9a55b;
--gold-dark: #a97d2d;
--ivory: #fffaf5;
--cream: #f6eadb;
--blush: #f3e5e4;
--text: #332529;
--muted: #786469;
}
/* =========================================================
WHOLE SITE BACKGROUND
========================================================= */
body {
color: var(--text) !important;
background:
radial-gradient(
circle at top left,
rgba(201,165,91,0.10),
transparent 30%
),
radial-gradient(
circle at bottom right,
rgba(111,29,58,0.08),
transparent 30%
),
linear-gradient(
135deg,
#fffaf5 0%,
#f8ecdf 48%,
#fff8f3 100%
) !important;
}
/* =========================================================
HEADER
========================================================= */
.top-header {
background:
linear-gradient(
90deg,
#fffdf9 0%,
#fff8f4 100%
) !important;
border-bottom:
3px solid var(--gold) !important;
box-shadow:
0 5px 24px rgba(81,17,39,0.12) !important;
}
/* BRAND */
.brand h1 {
color: var(--primary) !important;
}
.brand p {
color: var(--gold-dark) !important;
}
/* NAV */
.main-nav a {
color: var(--primary) !important;
}
.main-nav a:hover {
color: var(--gold-dark) !important;
}
/* USER MENU BUTTON */
.user-dropbtn {
background:
linear-gradient(
135deg,
var(--primary-light),
var(--primary)
) !important;
box-shadow:
0 8px 22px rgba(111,29,58,0.22) !important;
}
.user-dropbtn:hover {
background:
linear-gradient(
135deg,
var(--gold),
var(--gold-dark)
) !important;
}
/* =========================================================
HOME HERO
========================================================= */
.premium-hero {
background:
radial-gradient(
circle at center,
rgba(255,255,255,0.35),
transparent 50%
),
linear-gradient(
135deg,
rgba(255,250,245,0.93),
rgba(243,229,228,0.90)
),
url('/assets/images/weddingbg.png')
!important;
background-size: cover !important;
background-position: center !important;
border-bottom:
3px solid var(--gold) !important;
}
/* HERO CARD */
.hero-content {
background:
linear-gradient(
145deg,
rgba(255,255,255,0.99),
rgba(255,250,247,0.98)
) !important;
border:
1px solid #e6d1bc !important;
box-shadow:
0 24px 70px rgba(81,17,39,0.14) !important;
}
/* HERO TITLE */
.hero-content h1 {
color: var(--primary-dark) !important;
}
/* TELUGU LINE */
.telugu-line {
color: var(--gold-dark) !important;
}
/* TEXT */
.hero-main-text {
color: #38282d !important;
}
.hero-sub-text {
color: var(--muted) !important;
}
.brand-highlight {
color: var(--primary) !important;
}
/* =========================================================
BUTTONS
========================================================= */
.btn {
background:
linear-gradient(
135deg,
var(--primary-light),
var(--primary)
) !important;
color: white !important;
box-shadow:
0 8px 22px rgba(111,29,58,0.20) !important;
}
.btn:hover {
background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
) !important;
}
/* GOLD BUTTON */
.btn-gold {
background:
linear-gradient(
135deg,
#d6b76f,
#b98c39
) !important;
color: white !important;
}
.btn-gold:hover {
background:
linear-gradient(
135deg,
#bc913f,
#99701f
) !important;
}
/* OUTLINE BUTTON */
.btn-outline {
color: var(--primary) !important;
border:
1.5px solid var(--primary) !important;
background:
white !important;
}
.btn-outline:hover {
background:
var(--primary) !important;
color:
white !important;
}
/* =========================================================
PAGE CARDS
========================================================= */
.form-box,
.form-section,
.page-heading,
.dashboard-card,
.empty-card,
.info-card,
.profile-preview,
.content-card,
.bvv-profile-card {
background:
linear-gradient(
145deg,
#ffffff,
#fffaf7
) !important;
border-color:
#ead8c8 !important;
box-shadow:
0 14px 38px rgba(81,17,39,0.07) !important;
}
/* PAGE HEADINGS */
.page-heading h2,
.form-box h2,
.form-section h3,
.profile-page-heading h2 {
color:
var(--primary) !important;
}
/* SECTION DECORATION */
.form-section h3::after {
background:
linear-gradient(
90deg,
var(--primary),
var(--gold)
) !important;
}
/* =========================================================
FORM LABELS + INPUTS
========================================================= */
.profile-form label,
.form-box label {
color:
#54333d !important;
}
.profile-form input,
.profile-form select,
.profile-form textarea,
.form-box input,
.form-box select,
.form-box textarea {
background:
#fffdfa !important;
color:
var(--text) !important;
border-color:
#dfcec2 !important;
}
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus,
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {
border-color:
var(--gold) !important;
box-shadow:
0 0 0 4px rgba(201,165,91,0.15) !important;
}
/* =========================================================
CHECKBOX AREA
========================================================= */
.checkbox-grid label {
background:
#fff8f2 !important;
border-color:
#e7d6c3 !important;
}
.checkbox-grid label:hover {
background:
#f9ebe7 !important;
border-color:
var(--gold) !important;
}
.checkbox-grid input[type="checkbox"] {
accent-color:
var(--primary) !important;
}
/* =========================================================
BVV PROFILE VIEW
========================================================= */
.bvv-profile-id {
background:
linear-gradient(
90deg,
var(--primary-dark),
var(--primary)
) !important;
}
.bvv-profile-table th {
background:
#f4e4e8 !important;
color:
var(--primary-dark) !important;
}
.bvv-profile-table td {
background:
#fffdfa !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background:
linear-gradient(
90deg,
#4f1026 0%,
#6f1d3a 50%,
#4f1026 100%
) !important;
border-top:
3px solid var(--gold) !important;
color:
#fff9f3 !important;
box-shadow:
0 -5px 20px rgba(81,17,39,0.18) !important;
}
.site-footer p {
color:
#fff9f3 !important;
}
.site-footer a {
color:
#e8cb8d !important;
}
.site-footer a:hover {
color:
#ffffff !important;
}
/* =========================================================
FEATURE CARDS
========================================================= */
.feature-card {
background:
linear-gradient(
145deg,
#ffffff,
#fff9f4
) !important;
border:
1px solid #ead8c8 !important;
border-top:
5px solid var(--gold) !important;
box-shadow:
0 14px 38px rgba(81,17,39,0.07) !important;
}
.feature-card h3 {
color:
var(--primary) !important;
}
/* =========================================================
PANIGRAHANAM - DARK ROYAL WEDDING THEME
Paste at the VERY BOTTOM of style.css
========================================================= */
:root {
--bg-dark: #1a0d18;
--bg-dark-2: #2a1028;
--plum: #32132d;
--burgundy: #5b1734;
--ruby: #8c1d40;
--gold: #d4af62;
--gold-light: #f0d49a;
--ivory: #fff7ed;
--muted: #d7c5c9;
--card-dark: #26141f;
--card-dark-2: #341827;
--border-dark: #70405a;
}
/* =========================================================
WHOLE WEBSITE
========================================================= */
body {
color: var(--ivory) !important;
background:
radial-gradient(
circle at 15% 15%,
rgba(212,175,98,0.12),
transparent 30%
),
radial-gradient(
circle at 85% 80%,
rgba(140,29,64,0.18),
transparent 32%
),
linear-gradient(
135deg,
#140a12 0%,
#24101f 45%,
#160b14 100%
) !important;
}
/* =========================================================
HEADER
========================================================= */
.top-header {
background:
linear-gradient(
90deg,
#1d0d19,
#2d1127,
#1d0d19
) !important;
border-bottom:
3px solid var(--gold) !important;
box-shadow:
0 6px 24px rgba(0,0,0,0.35) !important;
}
/* BRAND */
.brand h1 {
color:
var(--gold-light) !important;
}
.brand p {
color:
var(--gold) !important;
}
/* NAVIGATION */
.main-nav a {
color:
var(--ivory) !important;
}
.main-nav a:hover {
color:
var(--gold-light) !important;
}
/* USER BUTTON */
.user-dropbtn {
background:
linear-gradient(
135deg,
var(--ruby),
var(--burgundy)
) !important;
color:
white !important;
border:
1px solid rgba(212,175,98,0.45) !important;
box-shadow:
0 8px 22px rgba(0,0,0,0.28) !important;
}
.user-dropbtn:hover {
background:
linear-gradient(
135deg,
#a62b50,
#6e1a3b
) !important;
}
/* =========================================================
HOME HERO
========================================================= */
.premium-hero {
background:
linear-gradient(
rgba(24,10,20,0.78),
rgba(43,16,38,0.88)
),
url('/assets/images/weddingbg.png')
!important;
background-size:
cover !important;
background-position:
center !important;
border-bottom:
3px solid var(--gold) !important;
}
/* HERO CARD */
.hero-content {
background:
linear-gradient(
145deg,
rgba(38,20,31,0.97),
rgba(52,24,39,0.97)
) !important;
border:
1px solid rgba(212,175,98,0.55) !important;
box-shadow:
0 26px 70px rgba(0,0,0,0.42) !important;
}
/* HERO TITLE */
.hero-content h1 {
color:
var(--gold-light) !important;
}
/* TELUGU LINE */
.telugu-line {
color:
var(--gold) !important;
}
/* MAIN TEXT */
.hero-main-text {
color:
var(--ivory) !important;
}
.hero-sub-text {
color:
#ddcfd2 !important;
}
.brand-highlight {
color:
#f2c15d !important;
}
/* =========================================================
BUTTONS
========================================================= */
.btn {
background:
linear-gradient(
135deg,
var(--ruby),
var(--burgundy)
) !important;
color:
white !important;
border:
1px solid rgba(212,175,98,0.35) !important;
box-shadow:
0 9px 24px rgba(0,0,0,0.30) !important;
}
.btn:hover {
background:
linear-gradient(
135deg,
#a92c53,
#701b3c
) !important;
transform:
translateY(-2px);
}
/* GOLD BUTTON */
.btn-gold {
background:
linear-gradient(
135deg,
#e1bd6e,
#b58a35
) !important;
color:
#24101f !important;
}
.btn-gold:hover {
background:
linear-gradient(
135deg,
#f0cf89,
#c59942
) !important;
}
/* OUTLINE BUTTON */
.btn-outline {
background:
transparent !important;
color:
var(--gold-light) !important;
border:
1.5px solid var(--gold) !important;
}
.btn-outline:hover {
background:
var(--gold) !important;
color:
#21101d !important;
}
/* =========================================================
CARDS / PANELS
========================================================= */
.form-box,
.form-section,
.page-heading,
.dashboard-card,
.empty-card,
.info-card,
.profile-preview,
.content-card,
.bvv-profile-card {
background:
linear-gradient(
145deg,
var(--card-dark),
var(--card-dark-2)
) !important;
border:
1px solid rgba(212,175,98,0.28) !important;
box-shadow:
0 16px 42px rgba(0,0,0,0.30) !important;
}
/* PAGE HEADINGS */
.page-heading h2,
.form-box h2,
.form-section h3,
.profile-page-heading h2 {
color:
var(--gold-light) !important;
}
/* BODY TEXT INSIDE CARDS */
.page-heading p,
.form-subtitle,
.profile-page-heading p,
.content-card,
.info-card,
.empty-card {
color:
var(--muted) !important;
}
/* FORM SECTION DECORATION */
.form-section h3 {
border-bottom:
1px solid rgba(212,175,98,0.22) !important;
}
.form-section h3::after {
background:
linear-gradient(
90deg,
var(--ruby),
var(--gold)
) !important;
}
/* =========================================================
FORM LABELS + FIELDS
========================================================= */
.profile-form label,
.form-box label {
color:
#f0d8df !important;
}
.profile-form input,
.profile-form select,
.profile-form textarea,
.form-box input,
.form-box select,
.form-box textarea {
background:
#1c1018 !important;
color:
var(--ivory) !important;
border:
1px solid #624054 !important;
}
.profile-form input::placeholder,
.profile-form textarea::placeholder,
.form-box input::placeholder,
.form-box textarea::placeholder {
color:
#a98e98 !important;
}
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus,
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {
border-color:
var(--gold) !important;
box-shadow:
0 0 0 4px rgba(212,175,98,0.12) !important;
}
/* =========================================================
CHECKBOXES
========================================================= */
.checkbox-grid label {
background:
#20111b !important;
border:
1px solid #5e3b4d !important;
color:
#eadce1 !important;
}
.checkbox-grid label:hover {
background:
#2c1725 !important;
border-color:
var(--gold) !important;
}
.checkbox-grid input[type="checkbox"] {
accent-color:
var(--gold) !important;
}
/* =========================================================
PROFILE TABLE
========================================================= */
.bvv-profile-id {
background:
linear-gradient(
90deg,
#5a1735,
#8c1d40
) !important;
color:
var(--gold-light) !important;
border-bottom:
1px solid var(--gold) !important;
}
.bvv-profile-table th {
background:
#321624 !important;
color:
var(--gold-light) !important;
}
.bvv-profile-table td {
background:
#21121a !important;
color:
#f5eaec !important;
}
.bvv-profile-table th,
.bvv-profile-table td {
border-color:
#614052 !important;
}
/* =========================================================
DASHBOARD STATUS
========================================================= */
.status-draft {
background:
#3a3033 !important;
color:
#ddd0d3 !important;
}
.status-submitted {
background:
#5b461b !important;
color:
#f8d98f !important;
}
.status-approved {
background:
#1e4b39 !important;
color:
#b9f0d4 !important;
}
.status-rejected {
background:
#5c1c2d !important;
color:
#ffc1cf !important;
}
/* =========================================================
FEATURE CARDS
========================================================= */
.feature-card {
background:
linear-gradient(
145deg,
#24131e,
#321726
) !important;
border:
1px solid rgba(212,175,98,0.28) !important;
border-top:
5px solid var(--gold) !important;
color:
var(--muted) !important;
box-shadow:
0 16px 40px rgba(0,0,0,0.28) !important;
}
.feature-card h3 {
color:
var(--gold-light) !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background:
linear-gradient(
90deg,
#160913,
#341327,
#160913
) !important;
border-top:
3px solid var(--gold) !important;
color:
var(--ivory) !important;
box-shadow:
0 -6px 22px rgba(0,0,0,0.35) !important;
}
.site-footer p {
color:
var(--ivory) !important;
}
.site-footer a {
color:
var(--gold-light) !important;
}
.site-footer a:hover {
color:
#ffffff !important;
}
/* =========================================================
PANIGRAHANAM - BURGUNDY + ANTIQUE GOLD WEDDING THEME
Paste this at the VERY BOTTOM of style.css
========================================================= */
:root {
--burgundy-deep: #4B0008;
--burgundy: #65000D;
--burgundy-soft: #7B1422;
--gold: #D6A23A;
--gold-soft: #E8C46A;
--gold-dark: #B47C1F;
--ivory: #FFF8EE;
--cream: #F3E7D6;
--card: #FFFDF9;
--text-dark: #2E1B1B;
--text-soft: #6D5656;
}
/* =========================================================
WHOLE WEBSITE BACKGROUND
========================================================= */
body {
color: var(--text-dark) !important;
background:
radial-gradient(
circle at top left,
rgba(214, 162, 58, 0.11),
transparent 30%
),
radial-gradient(
circle at bottom right,
rgba(101, 0, 13, 0.07),
transparent 32%
),
linear-gradient(
135deg,
#FFF8EE 0%,
#F6E8D2 48%,
#FFF9F1 100%
) !important;
}
/* =========================================================
HEADER
========================================================= */
.top-header {
background:
linear-gradient(
90deg,
#4B0008 0%,
#65000D 50%,
#4B0008 100%
) !important;
border-bottom:
3px solid var(--gold) !important;
box-shadow:
0 6px 24px rgba(75, 0, 8, 0.28) !important;
}
/* BRAND */
.brand h1 {
color: var(--gold-soft) !important;
}
.brand p {
color: var(--cream) !important;
}
/* NAVIGATION */
.main-nav a {
color: var(--ivory) !important;
}
.main-nav a:hover {
color: var(--gold-soft) !important;
}
/* USER BUTTON */
.user-dropbtn {
background:
linear-gradient(
135deg,
#7B1422,
#65000D
) !important;
color: #FFFFFF !important;
border:
1px solid rgba(232, 196, 106, 0.35) !important;
box-shadow:
0 8px 22px rgba(75, 0, 8, 0.28) !important;
}
.user-dropbtn:hover {
background:
linear-gradient(
135deg,
var(--gold),
var(--gold-dark)
) !important;
color: var(--burgundy-deep) !important;
}
/* =========================================================
USER DROPDOWN
========================================================= */
.user-dropdown-content {
background: #FFF8EE !important;
border:
1px solid #E4C98D !important;
}
.user-dropdown-content a {
color: var(--burgundy) !important;
border-bottom:
1px solid #ECDAB5 !important;
}
.user-dropdown-content a:hover {
background: #F7E9CE !important;
color: var(--burgundy-deep) !important;
}
/* =========================================================
HOME HERO
========================================================= */
.premium-hero {
background:
linear-gradient(
rgba(75, 0, 8, 0.84),
rgba(101, 0, 13, 0.88)
),
url('/assets/images/weddingbg.png')
!important;
background-size:
cover !important;
background-position:
center !important;
border-bottom:
3px solid var(--gold) !important;
}
/* SIDE IMAGES */
.hero-image {
border:
3px solid rgba(214, 162, 58, 0.72) !important;
background:
#FFF8EE !important;
box-shadow:
0 18px 45px rgba(0,0,0,0.32) !important;
}
/* HERO CONTENT CARD */
.hero-content {
background:
linear-gradient(
145deg,
rgba(255, 248, 238, 0.98),
rgba(243, 231, 214, 0.98)
) !important;
border:
1px solid var(--gold) !important;
box-shadow:
0 26px 70px rgba(75, 0, 8, 0.34) !important;
}
/* HERO TITLE */
.hero-content h1 {
color: var(--burgundy-deep) !important;
}
/* TELUGU LINE */
.telugu-line {
color: var(--gold-dark) !important;
}
/* HERO MAIN TEXT */
.hero-main-text {
color: #2E1B1B !important;
}
.hero-sub-text {
color: #6D5656 !important;
}
.brand-highlight {
color: var(--burgundy) !important;
}
/* =========================================================
BUTTONS
========================================================= */
.btn {
background:
linear-gradient(
135deg,
#7B1422,
#65000D
) !important;
color: #FFFFFF !important;
border:
1px solid rgba(214, 162, 58, 0.28) !important;
box-shadow:
0 8px 22px rgba(75, 0, 8, 0.24) !important;
}
.btn:hover {
background:
linear-gradient(
135deg,
#8D1D2D,
#65000D
) !important;
}
/* GOLD BUTTON */
.btn-gold {
background:
linear-gradient(
135deg,
#D6A23A,
#B47C1F
) !important;
color:
#FFFFFF !important;
}
.btn-gold:hover {
background:
linear-gradient(
135deg,
#E8C46A,
#C38C27
) !important;
color:
#4B0008 !important;
}
/* OUTLINE BUTTON */
.btn-outline {
background:
transparent !important;
color:
var(--burgundy) !important;
border:
1.5px solid var(--burgundy) !important;
}
.btn-outline:hover {
background:
var(--burgundy) !important;
color:
#FFFFFF !important;
}
/* =========================================================
PAGE CARDS
========================================================= */
.form-box,
.form-section,
.page-heading,
.dashboard-card,
.empty-card,
.info-card,
.profile-preview,
.content-card,
.bvv-profile-card {
background:
linear-gradient(
145deg,
#FFFDF9,
#FFF8EE
) !important;
border:
1px solid #E8D2A4 !important;
box-shadow:
0 14px 38px rgba(75, 0, 8, 0.08) !important;
}
/* PAGE HEADINGS */
.page-heading h2,
.form-box h2,
.form-section h3,
.profile-page-heading h2 {
color:
var(--burgundy) !important;
}
/* SECTION DECORATION */
.form-section h3 {
border-bottom:
1px solid #ECDAB5 !important;
}
.form-section h3::after {
background:
linear-gradient(
90deg,
var(--burgundy),
var(--gold)
) !important;
}
/* =========================================================
FORM LABELS
========================================================= */
.profile-form label,
.form-box label {
color:
#5A2A30 !important;
}
/* =========================================================
FORM FIELDS
========================================================= */
.profile-form input,
.profile-form select,
.profile-form textarea,
.form-box input,
.form-box select,
.form-box textarea {
background:
#FFFDF9 !important;
color:
var(--text-dark) !important;
border:
1px solid #DEC9A9 !important;
}
.profile-form input::placeholder,
.profile-form textarea::placeholder,
.form-box input::placeholder,
.form-box textarea::placeholder {
color:
#A18D86 !important;
}
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus,
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {
border-color:
var(--gold) !important;
box-shadow:
0 0 0 4px rgba(214, 162, 58, 0.14) !important;
}
/* =========================================================
CHECKBOXES
========================================================= */
.checkbox-grid label {
background:
#FFF5E8 !important;
border:
1px solid #E6D0A4 !important;
color:
#4E3030 !important;
}
.checkbox-grid label:hover {
background:
#F7E7C9 !important;
border-color:
var(--gold) !important;
}
.checkbox-grid input[type="checkbox"] {
accent-color:
var(--burgundy) !important;
}
/* =========================================================
PROFILE VIEW
========================================================= */
.bvv-profile-id {
background:
linear-gradient(
90deg,
#4B0008,
#65000D
) !important;
color:
var(--gold-soft) !important;
border-bottom:
1px solid var(--gold) !important;
}
.bvv-profile-table th {
background:
#F7E9E4 !important;
color:
var(--burgundy) !important;
}
.bvv-profile-table td {
background:
#FFFDF9 !important;
color:
var(--text-dark) !important;
}
.bvv-profile-table th,
.bvv-profile-table td {
border-color:
#DEC9C0 !important;
}
/* =========================================================
FEATURE CARDS
========================================================= */
.feature-card {
background:
linear-gradient(
145deg,
#FFFDF9,
#FFF6E9
) !important;
border:
1px solid #E8D2A4 !important;
border-top:
5px solid var(--gold) !important;
box-shadow:
0 14px 38px rgba(75, 0, 8, 0.08) !important;
}
.feature-card h3 {
color:
var(--burgundy) !important;
}
/* =========================================================
DASHBOARD STATUS
========================================================= */
.status-draft {
background:
#F1E5D8 !important;
color:
#6B5546 !important;
}
.status-submitted {
background:
#F8E3A4 !important;
color:
#76540F !important;
}
.status-approved {
background:
#E6F4E8 !important;
color:
#2A6540 !important;
}
.status-rejected {
background:
#F6DDE1 !important;
color:
#8C2432 !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background:
linear-gradient(
90deg,
#3A0006 0%,
#4B0008 50%,
#3A0006 100%
) !important;
border-top:
3px solid var(--gold) !important;
color:
var(--ivory) !important;
box-shadow:
0 -6px 22px rgba(75,0,8,0.32) !important;
}
.site-footer p {
color:
var(--ivory) !important;
}
.site-footer a {
color:
var(--gold-soft) !important;
}
.site-footer a:hover {
color:
#FFFFFF !important;
}
/* =========================================================
PANIGRAHANAM HOMEPAGE CONTENT
========================================================= */
.home-search-section,
.home-features-section,
.how-it-works-section,
.trust-section,
.home-cta-section {
padding: 70px 26px;
}
.home-search-section,
.how-it-works-section,
.home-cta-section {
background:
linear-gradient(
135deg,
#fff8ee,
#f6e7cf
);
}
.home-features-section,
.trust-section {
background: #fffdf9;
}
.home-section-heading {
max-width: 760px;
margin: 0 auto 38px;
text-align: center;
}
.section-eyebrow {
display: inline-block;
margin-bottom: 10px;
color: #d6a23a;
text-transform: uppercase;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.15em;
}
.home-section-heading h2,
.trust-content h2,
.home-cta-card h2 {
margin: 0 0 12px;
color: #65000d;
font-family: Georgia, "Times New Roman", serif;
font-size: 36px;
}
.home-section-heading p,
.trust-content p,
.home-cta-card p {
margin: 0;
color: #6d5656;
line-height: 1.7;
}
/* QUICK SEARCH */
.quick-search-card {
max-width: 1100px;
margin: 0 auto;
padding: 25px;
display: grid;
grid-template-columns:
repeat(4, 1fr)
auto;
gap: 16px;
align-items: end;
background: #fffdf9;
border: 1px solid #e5cc98;
border-radius: 18px;
box-shadow:
0 16px 38px rgba(75, 0, 8, 0.08);
}
.quick-search-field label {
display: block;
margin-bottom: 7px;
color: #5a2a30;
font-size: 13px;
font-weight: 700;
}
.quick-search-field select {
width: 100%;
min-height: 48px;
padding: 10px 12px;
border: 1px solid #dec9a9;
border-radius: 10px;
background: #fff;
font: inherit;
}
.quick-search-button .btn {
min-height: 48px;
white-space: nowrap;
}
/* FEATURES */
.home-feature-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 22px;
}
.home-feature-card {
padding: 32px 26px;
text-align: center;
background:
linear-gradient(
145deg,
#fffdf9,
#fff6e9
);
border: 1px solid #ead2a5;
border-top: 4px solid #d6a23a;
border-radius: 18px;
box-shadow:
0 14px 34px rgba(75,0,8,0.07);
}
.home-feature-icon {
margin-bottom: 16px;
font-size: 34px;
}
.home-feature-card h3 {
margin: 0 0 10px;
color: #65000d;
font-family: Georgia, serif;
font-size: 21px;
}
.home-feature-card p {
margin: 0;
color: #725c5c;
line-height: 1.65;
}
/* HOW IT WORKS */
.steps-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 18px;
}
.step-card {
padding: 28px 22px;
text-align: center;
background: #fffdf9;
border: 1px solid #e6cf9f;
border-radius: 17px;
box-shadow:
0 12px 30px rgba(75,0,8,0.06);
}
.step-number {
width: 48px;
height: 48px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
135deg,
#65000d,
#7b1422
);
color: #e8c46a;
font-size: 19px;
font-weight: 800;
}
.step-card h3 {
margin: 0 0 9px;
color: #65000d;
}
.step-card p {
margin: 0;
color: #745e5e;
line-height: 1.6;
}
/* TRUST */
.trust-card {
max-width: 1050px;
margin: 0 auto;
padding: 42px;
display: grid;
grid-template-columns:
1.3fr 0.7fr;
gap: 45px;
align-items: center;
background:
linear-gradient(
135deg,
#4b0008,
#65000d
);
border: 1px solid #d6a23a;
border-radius: 22px;
box-shadow:
0 18px 46px rgba(75,0,8,0.20);
}
.trust-content h2 {
color: #e8c46a;
}
.trust-content p {
margin-bottom: 14px;
color: #f3e7d6;
}
.trust-content strong {
color: #e8c46a;
}
.trust-list {
display: grid;
gap: 14px;
}
.trust-list div {
padding: 13px 15px;
background:
rgba(255,255,255,0.08);
border:
1px solid rgba(232,196,106,0.24);
border-radius: 11px;
color: #fff8ee;
font-weight: 650;
}
/* CTA */
.home-cta-card {
max-width: 900px;
margin: 0 auto;
padding: 48px 35px;
text-align: center;
background:
linear-gradient(
145deg,
#fffdf9,
#f8ead4
);
border: 1px solid #dcb96c;
border-radius: 22px;
box-shadow:
0 18px 44px rgba(75,0,8,0.09);
}
/* RESPONSIVE */
@media (max-width: 950px) {
.quick-search-card {
grid-template-columns:
repeat(2, 1fr);
}
.quick-search-button {
grid-column:
1 / -1;
}
.quick-search-button .btn {
width: 100%;
}
.steps-grid {
grid-template-columns:
repeat(2, 1fr);
}
.trust-card {
grid-template-columns:
1fr;
}
}
@media (max-width: 700px) {
.home-search-section,
.home-features-section,
.how-it-works-section,
.trust-section,
.home-cta-section {
padding:
48px 16px;
}
.home-section-heading h2,
.trust-content h2,
.home-cta-card h2 {
font-size: 29px;
}
.quick-search-card,
.home-feature-grid,
.steps-grid {
grid-template-columns:
1fr;
}
.home-feature-card,
.step-card {
text-align: left;
}
.home-feature-icon,
.step-number {
margin-left: 0;
}
.trust-card {
padding:
30px 22px;
}
}
/* =========================================================
HEADER ALIGNMENT - MOVE BRAND LEFT
========================================================= */
.header-container {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding:
10px 55px 10px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* keep brand grouped nicely */
.brand {
margin-left: 0 !important;
}
/* navigation stays on the right */
.main-nav {
margin-left: auto !important;
display: flex !important;
align-items: center !important;
gap: 28px !important;
}
/* =========================================================
HEADER - MATCH LOGO BACKGROUND
========================================================= */
.top-header {
background:
linear-gradient(
90deg,
#fffdf7 0%,
#fff9ef 100%
) !important;
border-bottom:
3px solid #d6a23a !important;
box-shadow:
0 5px 20px rgba(75, 0, 8, 0.10) !important;
}
/* BRAND TEXT */
.brand h1 {
color:
#65000d !important;
}
.brand p {
color:
#b47c1f !important;
}
/* NAVIGATION */
.main-nav a {
color:
#65000d !important;
}
.main-nav a:hover {
color:
#b47c1f !important;
}
/* REGISTER / LOGIN / USER BUTTON */
.user-dropbtn {
background:
linear-gradient(
135deg,
#7b1422,
#65000d
) !important;
color:
#ffffff !important;
}
/* OPTIONAL: make logo blend even better */
.brand img {
background:
#fffdf7 !important;
}
/* =========================================================
HOMEPAGE SEARCH CTA
========================================================= */
.home-search-cta-section {
padding:
65px 24px;
background:
linear-gradient(
135deg,
#fff8ee,
#f5e5cc
);
}
.home-search-cta-card {
max-width:
850px;
margin:
0 auto;
padding:
42px 35px;
text-align:
center;
background:
linear-gradient(
145deg,
#fffdf9,
#fff7eb
);
border:
1px solid #dfbf78;
border-radius:
22px;
box-shadow:
0 16px 40px
rgba(75,0,8,0.09);
}
.home-search-cta-card h2 {
margin:
4px 0 12px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
35px;
color:
#65000d;
}
.home-search-cta-card p {
max-width:
650px;
margin:
0 auto 24px;
color:
#6d5656;
font-size:
16px;
line-height:
1.7;
}
.search-login-note {
margin-top:
17px;
color:
#765e5e;
font-size:
14px;
}
.search-login-note a {
color:
#65000d;
font-weight:
700;
text-decoration:
none;
}
.search-login-note a:hover {
color:
#b47c1f;
}
/* =========================================================
USER DASHBOARD
========================================================= */
.user-dashboard-shell {
max-width: 1180px;
margin: 40px auto 90px;
padding: 0 24px;
}
.user-dashboard-hero {
display: grid;
grid-template-columns: 1.4fr 0.8fr;
gap: 24px;
margin-bottom: 28px;
}
.user-dashboard-hero-left,
.user-dashboard-hero-right,
.user-dashboard-stat-card,
.user-dashboard-panel,
.user-dashboard-empty-card {
background: linear-gradient(145deg, #fffdf9, #fff7ec);
border: 1px solid #e8d2a4;
border-radius: 22px;
box-shadow: 0 16px 38px rgba(75, 0, 8, 0.08);
}
.user-dashboard-hero-left {
padding: 34px 38px;
}
.user-dashboard-hero-right {
padding: 28px;
display: flex;
align-items: center;
}
.user-dashboard-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: #c9952d;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.user-dashboard-hero-left h1 {
margin: 0 0 10px;
color: #65000d;
font-family: Georgia, "Times New Roman", serif;
font-size: 56px;
line-height: 1.05;
}
.user-dashboard-hero-left p {
margin: 0;
color: #7a6464;
font-size: 18px;
line-height: 1.7;
}
.user-dashboard-status-box {
width: 100%;
}
.user-dashboard-status-label {
display: block;
margin-bottom: 10px;
color: #7a6464;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.user-dashboard-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
text-transform: capitalize;
}
.user-dashboard-badge.draft {
background: #f1e5d8;
color: #6a5346;
}
.user-dashboard-badge.submitted {
background: #f8e3a4;
color: #7b570d;
}
.user-dashboard-badge.approved {
background: #e6f4e8;
color: #2d6b44;
}
.user-dashboard-badge.rejected {
background: #f7dce0;
color: #942739;
}
.user-dashboard-status-box p {
margin: 0;
color: #6d5656;
line-height: 1.65;
}
.user-dashboard-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 28px;
}
.user-dashboard-stat-card {
padding: 24px;
}
.user-dashboard-stat-title {
display: block;
margin-bottom: 10px;
color: #836565;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.user-dashboard-stat-card strong {
display: block;
margin-bottom: 8px;
color: #65000d;
font-size: 25px;
line-height: 1.2;
}
.user-dashboard-stat-card small {
color: #8a7272;
font-size: 13px;
line-height: 1.6;
}
.user-dashboard-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 24px;
}
.user-dashboard-panel {
padding: 30px 32px;
}
.user-dashboard-panel-head {
margin-bottom: 24px;
}
.user-dashboard-panel-head h2 {
margin: 0 0 7px;
color: #65000d;
font-family: Georgia, "Times New Roman", serif;
font-size: 30px;
}
.user-dashboard-panel-head p {
margin: 0;
color: #816969;
line-height: 1.6;
}
.user-dashboard-detail-list {
border: 1px solid #ead6b0;
border-radius: 16px;
overflow: hidden;
background: #fffdf9;
}
.user-dashboard-detail-row {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 16px 18px;
border-bottom: 1px solid #efe0c4;
}
.user-dashboard-detail-row:last-child {
border-bottom: none;
}
.user-dashboard-detail-row span {
color: #6b5555;
font-weight: 600;
}
.user-dashboard-detail-row strong {
color: #341d1d;
text-align: right;
}
.user-dashboard-inline-note {
margin-top: 18px;
padding: 15px 18px;
background: #fff6e7;
border: 1px solid #ead19c;
border-radius: 12px;
color: #7a5f32;
line-height: 1.65;
}
.user-dashboard-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 22px;
}
.user-dashboard-actions.center {
justify-content: center;
}
.user-dashboard-side-stack {
display: flex;
flex-direction: column;
gap: 24px;
}
.user-dashboard-steps {
display: grid;
gap: 16px;
}
.user-dashboard-step {
display: grid;
grid-template-columns: 46px 1fr;
gap: 14px;
align-items: start;
padding: 14px;
background: #fffbf5;
border: 1px solid #eddcbd;
border-radius: 14px;
}
.user-dashboard-step.done {
background: #f6fbf7;
border-color: #cfe7d4;
}
.user-dashboard-step .num {
width: 46px;
height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #7b1422, #65000d);
color: #f3d27b;
font-weight: 800;
font-size: 18px;
}
.user-dashboard-step.done .num {
background: linear-gradient(135deg, #2f7c4b, #276740);
color: #ffffff;
}
.user-dashboard-step strong {
display: block;
margin-bottom: 5px;
color: #4e2d2d;
}
.user-dashboard-step p {
margin: 0;
color: #7a6666;
line-height: 1.6;
font-size: 14px;
}
.user-dashboard-panel-accent {
background: linear-gradient(145deg, #65000d, #7b1422) !important;
border-color: #d6a23a !important;
}
.user-dashboard-panel-accent .user-dashboard-panel-head h2,
.user-dashboard-panel-accent .user-dashboard-panel-head p {
color: #fff7ec !important;
}
.user-dashboard-quick-links {
display: grid;
gap: 12px;
}
.user-dashboard-quick-links a {
display: block;
padding: 14px 16px;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(232,196,106,0.25);
border-radius: 12px;
color: #fff7ec;
text-decoration: none;
font-weight: 700;
transition: all 0.2s ease;
}
.user-dashboard-quick-links a:hover {
background: rgba(255,255,255,0.16);
color: #f3d27b;
}
.user-dashboard-empty-wrap {
margin-top: 15px;
}
.user-dashboard-empty-card {
padding: 45px 34px;
text-align: center;
}
.user-dashboard-empty-card h2 {
margin: 0 0 12px;
color: #65000d;
font-family: Georgia, "Times New Roman", serif;
font-size: 34px;
}
.user-dashboard-empty-card p {
max-width: 680px;
margin: 0 auto;
color: #7b6666;
line-height: 1.7;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
.user-dashboard-hero,
.user-dashboard-grid {
grid-template-columns: 1fr;
}
.user-dashboard-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.user-dashboard-shell {
padding: 0 16px;
}
.user-dashboard-hero-left h1 {
font-size: 40px;
}
.user-dashboard-stats {
grid-template-columns: 1fr;
}
.user-dashboard-panel,
.user-dashboard-hero-left,
.user-dashboard-hero-right,
.user-dashboard-empty-card {
padding: 24px 20px;
}
.user-dashboard-detail-row {
flex-direction: column;
gap: 6px;
}
.user-dashboard-detail-row strong {
text-align: left;
}
.user-dashboard-actions {
flex-direction: column;
}
.user-dashboard-actions .btn {
width: 100%;
}
}
/* =========================================================
FOOTER MATCH HEADER BACKGROUND
========================================================= */
.site-footer {
background:
linear-gradient(
90deg,
#fffdf7 0%,
#fff9ef 100%
) !important;
border-top:
3px solid #d6a23a !important;
color:
#65000d !important;
box-shadow:
0 -5px 20px rgba(75, 0, 8, 0.10) !important;
}
.site-footer p {
color:
#65000d !important;
}
.site-footer a {
color:
#b47c1f !important;
}
.site-footer a:hover {
color:
#65000d !important;
}
/* =========================================================
USER DASHBOARD
========================================================= */
.user-dashboard-shell {
max-width: 1180px;
margin: 40px auto 90px;
padding: 0 24px;
}
.user-dashboard-hero {
display: grid;
grid-template-columns: 1.4fr 0.8fr;
gap: 24px;
margin-bottom: 28px;
}
.user-dashboard-hero-left,
.user-dashboard-hero-right,
.user-dashboard-stat-card,
.user-dashboard-panel,
.user-dashboard-empty-card {
background: linear-gradient(145deg, #fffdf9, #fff7ec);
border: 1px solid #e8d2a4;
border-radius: 22px;
box-shadow: 0 16px 38px rgba(75, 0, 8, 0.08);
}
.user-dashboard-hero-left {
padding: 34px 38px;
}
.user-dashboard-hero-right {
padding: 28px;
display: flex;
align-items: center;
}
.user-dashboard-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: #c9952d;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.user-dashboard-hero-left h1 {
margin: 0 0 10px;
color: #65000d;
font-family: Georgia, "Times New Roman", serif;
font-size: 56px;
line-height: 1.05;
}
.user-dashboard-hero-left p {
margin: 0;
color: #7a6464;
font-size: 18px;
line-height: 1.7;
}
.user-dashboard-status-box {
width: 100%;
}
.user-dashboard-status-label {
display: block;
margin-bottom: 10px;
color: #7a6464;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.user-dashboard-badge {
display: inline-block;
padding: 9px 18px;
margin-bottom: 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
text-transform: capitalize;
}
.user-dashboard-badge.draft {
background: #f1e5d8;
color: #6a5346;
}
.user-dashboard-badge.submitted {
background: #f8e3a4;
color: #7b570d;
}
.user-dashboard-badge.approved {
background: #e6f4e8;
color: #2d6b44;
}
.user-dashboard-badge.rejected {
background: #f7dce0;
color: #942739;
}
.user-dashboard-status-box p {
margin: 0;
color: #6d5656;
line-height: 1.65;
}
.user-dashboard-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 28px;
}
.user-dashboard-stat-card {
padding: 24px;
}
.user-dashboard-stat-title {
display: block;
margin-bottom: 10px;
color: #836565;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.user-dashboard-stat-card strong {
display: block;
margin-bottom: 8px;
color: #65000d;
font-size: 25px;
line-height: 1.2;
}
.user-dashboard-stat-card small {
color: #8a7272;
font-size: 13px;
line-height: 1.6;
}
.user-dashboard-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 24px;
}
.user-dashboard-panel {
padding: 30px 32px;
}
.user-dashboard-panel-head {
margin-bottom: 24px;
}
.user-dashboard-panel-head h2 {
margin: 0 0 7px;
color: #65000d;
font-family: Georgia, "Times New Roman", serif;
font-size: 30px;
}
.user-dashboard-panel-head p {
margin: 0;
color: #816969;
line-height: 1.6;
}
.user-dashboard-detail-list {
border: 1px solid #ead6b0;
border-radius: 16px;
overflow: hidden;
background: #fffdf9;
}
.user-dashboard-detail-row {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 16px 18px;
border-bottom: 1px solid #efe0c4;
}
.user-dashboard-detail-row:last-child {
border-bottom: none;
}
.user-dashboard-detail-row span {
color: #6b5555;
font-weight: 600;
}
.user-dashboard-detail-row strong {
color: #341d1d;
text-align: right;
}
.user-dashboard-inline-note {
margin-top: 18px;
padding: 15px 18px;
background: #fff6e7;
border: 1px solid #ead19c;
border-radius: 12px;
color: #7a5f32;
line-height: 1.65;
}
.user-dashboard-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 22px;
}
.user-dashboard-actions.center {
justify-content: center;
}
.user-dashboard-side-stack {
display: flex;
flex-direction: column;
gap: 24px;
}
.user-dashboard-steps {
display: grid;
gap: 16px;
}
.user-dashboard-step {
display: grid;
grid-template-columns: 46px 1fr;
gap: 14px;
align-items: start;
padding: 14px;
background: #fffbf5;
border: 1px solid #eddcbd;
border-radius: 14px;
}
.user-dashboard-step.done {
background: #f6fbf7;
border-color: #cfe7d4;
}
.user-dashboard-step .num {
width: 46px;
height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #7b1422, #65000d);
color: #f3d27b;
font-weight: 800;
font-size: 18px;
}
.user-dashboard-step.done .num {
background: linear-gradient(135deg, #2f7c4b, #276740);
color: #ffffff;
}
.user-dashboard-step strong {
display: block;
margin-bottom: 5px;
color: #4e2d2d;
}
.user-dashboard-step p {
margin: 0;
color: #7a6666;
line-height: 1.6;
font-size: 14px;
}
.user-dashboard-panel-accent {
background: linear-gradient(145deg, #65000d, #7b1422) !important;
border-color: #d6a23a !important;
}
.user-dashboard-panel-accent .user-dashboard-panel-head h2,
.user-dashboard-panel-accent .user-dashboard-panel-head p {
color: #fff7ec !important;
}
.user-dashboard-quick-links {
display: grid;
gap: 12px;
}
.user-dashboard-quick-links a {
display: block;
padding: 14px 16px;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(232,196,106,0.25);
border-radius: 12px;
color: #fff7ec;
text-decoration: none;
font-weight: 700;
transition: all 0.2s ease;
}
.user-dashboard-quick-links a:hover {
background: rgba(255,255,255,0.16);
color: #f3d27b;
}
.user-dashboard-empty-wrap {
margin-top: 15px;
}
.user-dashboard-empty-card {
padding: 45px 34px;
text-align: center;
}
.user-dashboard-empty-card h2 {
margin: 0 0 12px;
color: #65000d;
font-family: Georgia, "Times New Roman", serif;
font-size: 34px;
}
.user-dashboard-empty-card p {
max-width: 680px;
margin: 0 auto;
color: #7b6666;
line-height: 1.7;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
.user-dashboard-hero,
.user-dashboard-grid {
grid-template-columns: 1fr;
}
.user-dashboard-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.user-dashboard-shell {
padding: 0 16px;
}
.user-dashboard-hero-left h1 {
font-size: 40px;
}
.user-dashboard-stats {
grid-template-columns: 1fr;
}
.user-dashboard-panel,
.user-dashboard-hero-left,
.user-dashboard-hero-right,
.user-dashboard-empty-card {
padding: 24px 20px;
}
.user-dashboard-detail-row {
flex-direction: column;
gap: 6px;
}
.user-dashboard-detail-row strong {
text-align: left;
}
.user-dashboard-actions {
flex-direction: column;
}
.user-dashboard-actions .btn {
width: 100%;
}
}
/* =========================================================
CLOUDFLARE TURNSTILE
========================================================= */
.cf-turnstile {
margin:
18px 0 22px;
display: flex;
justify-content:
flex-start;
}
.form-box .cf-turnstile {
justify-content:
center;
}
.contact-form .cf-turnstile {
margin:
5px 0;
}
/* =========================================================
PANIGRAHANAM - DARK WEDDING BACKGROUND
PUT THIS AT THE VERY BOTTOM OF STYLE.CSS
========================================================= */
html,
body {
background: #310812 !important;
}
/* MAIN HOMEPAGE BACKGROUND */
body main.panigrahanam-home,
.panigrahanam-home {
background:
linear-gradient(
rgba(49, 8, 18, 0.82),
rgba(49, 8, 18, 0.90)
),
url('/assets/images/wedding-bg.jpg') !important;
background-size: cover !important;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
}
/* REMOVE OLD LIGHT BACKGROUND FROM HERO */
.panigrahanam-home .pg-hero {
background: transparent !important;
}
/* SEARCH AREA SHOULD ALSO SIT ON DARK BACKGROUND */
.panigrahanam-home .pg-search-section {
background: transparent !important;
}
/* FEATURE AREA */
.panigrahanam-home .pg-feature-section {
background: transparent !important;
}
/* REMOVE ANY GLOBAL MAIN BACKGROUND */
main.panigrahanam-home {
background-color: #310812 !important;
}
/* =========================================================
KEEP CARDS LIGHT / PREMIUM
========================================================= */
.pg-hero-card,
.pg-search-card,
.pg-feature-card {
background:
linear-gradient(
145deg,
#fffdf7,
#f8ead3
) !important;
}
/* =========================================================
GOLD BORDER BETWEEN HEADER AND BODY
========================================================= */
.top-header {
border-bottom:
3px solid #d6a23a !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background:
linear-gradient(
90deg,
#fffdf7,
#fff8ed
) !important;
border-top:
3px solid #d6a23a !important;
color:
#65000d !important;
}
/* =========================================================
PANIGRAHANAM - FINAL CLEAN WEDDING HOMEPAGE
KEEP THIS AS THE LAST BLOCK IN style.css
========================================================= */
:root {
--pg-maroon: #4a0710;
--pg-maroon-deep: #33040b;
--pg-maroon-soft: #65000d;
--pg-gold: #d5a135;
--pg-gold-light: #edcf79;
--pg-ivory: #fffaf0;
--pg-card: #fff9ed;
--pg-text: #37191d;
--pg-muted: #735d60;
}
/* =========================================================
GLOBAL BODY
========================================================= */
html,
body {
background: #3a0710 !important;
}
body {
color: var(--pg-text) !important;
}
/* =========================================================
HEADER - MATCH MOCKUP
========================================================= */
.top-header {
background:
linear-gradient(
90deg,
#430710 0%,
#5a0815 50%,
#430710 100%
) !important;
border-bottom:
2px solid var(--pg-gold) !important;
box-shadow:
0 5px 20px rgba(0,0,0,.28) !important;
}
.header-container {
max-width: 1320px !important;
}
.brand h1 {
color: var(--pg-gold-light) !important;
}
.brand p {
color: #f5e5be !important;
}
.main-nav a {
color: #fff8eb !important;
}
.main-nav a:hover {
color: var(--pg-gold-light) !important;
}
/* =========================================================
HOMEPAGE BACKGROUND
========================================================= */
.panigrahanam-home {
background:
linear-gradient(
rgba(55, 3, 13, .64),
rgba(55, 3, 13, .78)
),
url('/assets/images/wedding-bg.jpg')
center top / cover fixed
!important;
}
/* =========================================================
HERO
========================================================= */
.panigrahanam-home .pg-hero {
padding:
58px 45px 46px !important;
background:
transparent !important;
border-bottom:
1px solid rgba(213,161,53,.50) !important;
}
.pg-hero-grid {
max-width: 1380px !important;
grid-template-columns:
230px minmax(520px, 760px) 230px !important;
gap:
34px !important;
}
.pg-side-image {
padding: 4px !important;
border-radius: 22px !important;
background:
linear-gradient(
145deg,
#f1d277,
#b8791d,
#f1d277
) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.35) !important;
}
.pg-side-image img {
height: 310px !important;
border-radius: 18px !important;
}
/* remove strange decorative emoji/symbol */
.pg-side-image::after {
display: none !important;
}
/* HERO CARD */
.pg-hero-card {
padding:
42px 48px !important;
background:
linear-gradient(
145deg,
#fffdf8,
#f8ead2
) !important;
border:
1px solid var(--pg-gold) !important;
border-radius:
24px !important;
box-shadow:
0 20px 55px rgba(0,0,0,.30) !important;
}
/* remove awkward corner symbols */
.pg-hero-card::before,
.pg-hero-card::after {
display: none !important;
}
.pg-hero-card h1 {
color:
#560711 !important;
font-size:
clamp(48px, 4.7vw, 70px) !important;
margin-bottom:
16px !important;
}
.pg-telugu {
color:
#b57a19 !important;
font-size:
21px !important;
}
.pg-hero-main {
color:
#351b1f !important;
font-size:
31px !important;
}
.pg-hero-sub {
max-width:
620px !important;
color:
var(--pg-muted) !important;
font-size:
15px !important;
line-height:
1.65 !important;
}
/* =========================================================
SEARCH SECTION
========================================================= */
.pg-search-section {
padding:
28px 40px 18px !important;
background:
transparent !important;
}
.pg-search-card {
max-width:
1260px !important;
margin:
0 auto !important;
padding:
26px 30px !important;
background:
linear-gradient(
145deg,
#fffdf8,
#f9ecd7
) !important;
border:
1px solid rgba(213,161,53,.75) !important;
border-radius:
17px !important;
box-shadow:
0 14px 34px rgba(0,0,0,.22) !important;
}
/* remove random ornaments */
.pg-search-card::before,
.pg-search-card::after {
display:
none !important;
}
.pg-search-header h2 {
font-size:
29px !important;
color:
#600811 !important;
}
.pg-search-header p {
color:
#786163 !important;
}
.pg-search-grid {
gap:
14px !important;
}
.pg-search-field select {
min-height:
46px !important;
background:
#fffdf9 !important;
border:
1px solid #dec596 !important;
border-radius:
8px !important;
}
.pg-search-button {
min-height:
46px !important;
padding:
0 25px !important;
background:
linear-gradient(
135deg,
#780d1c,
#590711
) !important;
box-shadow:
0 8px 18px rgba(83,0,10,.22) !important;
}
/* =========================================================
FEATURE CARDS
========================================================= */
.pg-feature-section {
padding:
4px 40px 34px !important;
background:
transparent !important;
}
.pg-feature-grid {
max-width:
1260px !important;
margin:
auto !important;
gap:
18px !important;
}
.pg-feature-card {
padding:
21px 22px !important;
grid-template-columns:
62px 1fr !important;
background:
linear-gradient(
145deg,
#fffdf8,
#faecd5
) !important;
border:
1px solid rgba(213,161,53,.68) !important;
border-radius:
16px !important;
box-shadow:
0 12px 30px rgba(0,0,0,.19) !important;
}
.pg-feature-icon {
width:
58px !important;
height:
58px !important;
background:
linear-gradient(
145deg,
#efc957,
#c38b22
) !important;
border:
2px solid #f3d778 !important;
color:
#690813 !important;
font-family:
Georgia, serif !important;
font-size:
25px !important;
}
.pg-feature-card h3 {
font-size:
19px !important;
color:
#640a15 !important;
}
.pg-feature-card p {
font-size:
13px !important;
color:
#776163 !important;
}
/* =========================================================
STATS STRIP - LIKE THE MOCKUP
========================================================= */
.pg-stats-band {
padding:
20px 25px !important;
background:
linear-gradient(
90deg,
#3a050d,
#520914,
#3a050d
) !important;
border-top:
1px solid #b77e21 !important;
border-bottom:
1px solid #b77e21 !important;
}
.pg-stats-inner {
max-width:
1180px !important;
}
.pg-stat {
min-height:
62px !important;
gap:
16px !important;
border-right:
1px solid rgba(231,194,105,.45) !important;
}
.pg-stat-icon {
min-width:
45px !important;
color:
var(--pg-gold-light) !important;
font-family:
Georgia, serif !important;
font-size:
32px !important;
}
.pg-stat strong {
color:
var(--pg-gold-light) !important;
font-size:
22px !important;
}
.pg-stat span {
color:
#fff5e7 !important;
font-size:
12px !important;
}
/* =========================================================
REMOVE STRIPED BOTTOM BAR
========================================================= */
.pg-bottom-decoration {
height:
14px !important;
background:
linear-gradient(
90deg,
#8e5f14,
#edca6b,
#a36c17,
#edca6b,
#8e5f14
) !important;
border-top:
1px solid #f0ce74 !important;
border-bottom:
1px solid #6a3b08 !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background:
linear-gradient(
90deg,
#430710,
#590813,
#430710
) !important;
color:
#f8e9c4 !important;
border-top:
2px solid var(--pg-gold) !important;
}
.site-footer p {
color:
#f8e9c4 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width: 900px) {
.pg-hero-grid {
grid-template-columns:
1fr !important;
}
.pg-side-image {
display:
none !important;
}
.pg-search-grid {
grid-template-columns:
repeat(2,1fr) !important;
}
.pg-feature-grid {
grid-template-columns:
1fr !important;
}
}
@media(max-width: 600px) {
.pg-search-grid {
grid-template-columns:
1fr !important;
}
.pg-stats-inner {
grid-template-columns:
1fr !important;
}
.pg-stat {
border-right:
none !important;
border-bottom:
1px solid rgba(231,194,105,.35) !important;
}
}
/* =========================
CIRCULAR HEADER LOGO
========================= */
.brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
.brand-logo-circle {
width: 86px;
height: 86px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: #fff8ee;
border: 2px solid #d5a135;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.brand-logo-circle img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.brand-text h1 {
margin: 0;
}
.brand-text p {
margin: 4px 0 0;
}
/* =========================================================
PANIGRAHANAM - MOCKUP STYLE HEADER + FOOTER DECORATION
KEEP THIS AT THE VERY BOTTOM OF style.css
========================================================= */
/* =========================================================
HEADER
========================================================= */
.top-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 99999 !important;
background:
linear-gradient(
90deg,
#430710 0%,
#5a0815 50%,
#430710 100%
) !important;
border-bottom:
2px solid #d5a135 !important;
box-shadow:
0 6px 20px rgba(0,0,0,.30) !important;
overflow: visible !important;
}
/* subtle wedding pattern inside header */
.top-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .16;
background-image:
radial-gradient(
circle at 18% 50%,
rgba(232,196,106,.30) 0 2px,
transparent 3px
),
radial-gradient(
circle at 82% 50%,
rgba(232,196,106,.30) 0 2px,
transparent 3px
);
background-size:
90px 90px;
}
/* gold ornamental mandala effect at top centre */
.top-header::after {
content: "✦";
position: absolute;
left: 50%;
top: -18px;
transform:
translateX(-50%);
width: 105px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #d8ae4b;
font-size: 32px;
border:
1px solid rgba(216,174,75,.35);
border-radius:
0 0 70px 70px;
background:
rgba(82,8,19,.75);
box-shadow:
0 6px 18px rgba(0,0,0,.18);
}
/* =========================================================
HEADER CONTAINER
========================================================= */
.header-container {
position: relative;
max-width:
1320px !important;
margin:
0 auto !important;
padding:
10px 24px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
space-between !important;
}
/* =========================================================
CIRCULAR LOGO
========================================================= */
.brand {
display:
flex !important;
align-items:
center !important;
gap:
14px !important;
text-decoration:
none !important;
position:
relative;
z-index:
2;
}
.brand-logo-circle {
width:
86px;
height:
86px;
border-radius:
50%;
overflow:
hidden;
flex-shrink:
0;
background:
#fff8ee;
border:
2px solid #d5a135;
box-shadow:
0 4px 14px rgba(0,0,0,.20);
}
.brand-logo-circle img {
width:
100%;
height:
100%;
object-fit:
cover;
display:
block;
}
.brand h1 {
margin:
0 !important;
color:
#edcf79 !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
31px !important;
}
.brand p {
margin:
5px 0 0 !important;
color:
#f3e1b6 !important;
font-size:
13px !important;
}
/* =========================================================
NAVIGATION
========================================================= */
.main-nav {
position:
relative;
z-index:
2;
display:
flex;
align-items:
center;
gap:
27px;
}
.main-nav a {
position:
relative;
color:
#fff8ee !important;
text-decoration:
none !important;
font-weight:
700;
padding:
8px 0;
}
.main-nav a::after {
content: "";
position:
absolute;
left:
50%;
bottom:
0;
width:
0;
height:
2px;
background:
#d8ae4b;
transform:
translateX(-50%);
transition:
width .2s ease;
}
.main-nav a:hover::after {
width:
100%;
}
.main-nav a:hover {
color:
#edcf79 !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
position:
fixed !important;
left:
0 !important;
right:
0 !important;
bottom:
0 !important;
z-index:
99998 !important;
min-height:
66px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
margin:
0 !important;
padding:
20px 20px 10px !important;
background:
linear-gradient(
90deg,
#3a050d,
#550914,
#3a050d
) !important;
color:
#f7e6bd !important;
border-top:
1px solid #d5a135 !important;
box-shadow:
0 -5px 20px rgba(0,0,0,.26) !important;
overflow:
hidden;
}
/* GOLD ORNAMENTAL BAND */
.site-footer::before {
content: "";
position:
absolute;
left:
0;
right:
0;
top:
0;
height:
12px;
background:
repeating-linear-gradient(
90deg,
#8b5d16 0px,
#8b5d16 8px,
#d4aa45 8px,
#d4aa45 16px,
#f0cf74 16px,
#f0cf74 20px,
#9a6819 20px,
#9a6819 28px
);
border-bottom:
1px solid #f0cf74;
}
/* subtle footer pattern */
.site-footer::after {
content: "";
position:
absolute;
inset:
12px 0 0;
pointer-events:
none;
opacity:
.08;
background:
radial-gradient(
circle at 20% 50%,
#edcf79 0 2px,
transparent 3px
),
radial-gradient(
circle at 80% 50%,
#edcf79 0 2px,
transparent 3px
);
background-size:
85px 85px;
}
.site-footer p {
position:
relative;
z-index:
2;
margin:
0 !important;
color:
#f7e6bd !important;
font-size:
14px;
}
.site-footer a {
color:
#edcf79 !important;
}
/* =========================================================
BODY SPACING FOR FIXED HEADER / FOOTER
========================================================= */
body {
padding-top:
108px !important;
padding-bottom:
72px !important;
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width: 768px) {
body {
padding-top:
165px !important;
padding-bottom:
76px !important;
}
.header-container {
flex-direction:
column !important;
gap:
10px !important;
}
.main-nav {
gap:
15px !important;
flex-wrap:
wrap;
justify-content:
center;
}
.top-header::after {
display:
none;
}
}
/* =========================================================
PANIGRAHANAM - BRIGHTER BODY + CLEANER FOOTER
KEEP THIS AS THE LAST BLOCK IN style.css
========================================================= */
/* =========================================================
BRIGHTER HOMEPAGE BODY
========================================================= */
.panigrahanam-home {
background:
linear-gradient(
rgba(92, 14, 26, .48),
rgba(72, 8, 18, .62)
),
url('/assets/images/wedding-bg.jpg')
center top / cover fixed
!important;
}
/* slightly brighter hero area */
.panigrahanam-home .pg-hero {
background:
linear-gradient(
rgba(110, 20, 34, .10),
rgba(90, 10, 24, .14)
) !important;
border-bottom:
1px solid rgba(226, 180, 79, .45) !important;
}
/* brighten lower homepage sections */
.pg-search-section,
.pg-feature-section {
background:
linear-gradient(
rgba(101, 15, 30, .10),
rgba(92, 12, 26, .14)
) !important;
}
/* =========================================================
CLEAN FOOTER
========================================================= */
.site-footer {
min-height:
62px !important;
padding:
0 20px !important;
background:
linear-gradient(
90deg,
#4a0710 0%,
#620b18 50%,
#4a0710 100%
) !important;
border-top:
1px solid #d8aa45 !important;
box-shadow:
0 -4px 14px rgba(0,0,0,.22) !important;
overflow:
hidden !important;
}
/* REMOVE OLD STRIPED DECORATION */
.site-footer::before {
content:
"" !important;
position:
absolute;
top:
0;
left:
50%;
transform:
translateX(-50%);
width:
220px;
height:
2px;
background:
linear-gradient(
90deg,
transparent,
#d8aa45,
#f0cf79,
#d8aa45,
transparent
) !important;
border:
none !important;
}
/* subtle footer decoration */
.site-footer::after {
content:
"◆" !important;
position:
absolute;
top:
-8px;
left:
50%;
transform:
translateX(-50%);
width:
auto;
height:
auto;
background:
#570914 !important;
color:
#e7c56d;
font-size:
14px;
padding:
0 10px;
opacity:
1 !important;
}
/* FOOTER TEXT */
.site-footer p {
position:
relative;
z-index:
2;
margin:
0 !important;
color:
#f6e7c5 !important;
font-size:
14px !important;
}
/* =========================================================
REMOVE OLD BOTTOM DECORATIVE STRIPE
========================================================= */
.pg-bottom-decoration {
height:
4px !important;
background:
linear-gradient(
90deg,
transparent,
#c78f29,
#efd175,
#c78f29,
transparent
) !important;
border:
none !important;
}
/* =========================================================
FEATURE CARDS - SLIGHTLY LIGHTER
========================================================= */
.pg-feature-card {
background:
linear-gradient(
145deg,
#fffdf8,
#f9edd8
) !important;
box-shadow:
0 10px 24px rgba(0,0,0,.15) !important;
}
/* =========================================================
HERO CARD - SLIGHTLY BRIGHTER
========================================================= */
.pg-hero-card {
background:
linear-gradient(
145deg,
#fffdf8 0%,
#fff6e6 65%,
#f6e5c8 100%
) !important;
box-shadow:
0 18px 45px rgba(0,0,0,.24) !important;
}
/* =========================================================
SEARCH CARD
========================================================= */
.pg-search-card {
background:
linear-gradient(
145deg,
#fffdf8,
#faedd7
) !important;
box-shadow:
0 12px 28px rgba(0,0,0,.17) !important;
}
/* =========================================================
FINAL FOOTER FIX
========================================================= */
.site-footer {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 68px !important;
min-height: 68px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 20px !important;
background:
linear-gradient(
90deg,
#430710,
#5c0a16,
#430710
) !important;
border-top:
1px solid #d5a135 !important;
box-shadow:
0 -4px 15px rgba(0,0,0,.22) !important;
overflow: visible !important;
z-index: 99998 !important;
}
/* remove decorative blocks that cover footer */
.site-footer::before,
.site-footer::after {
display: none !important;
}
/* FOOTER TEXT */
.site-footer p {
margin: 0 !important;
color: #f6e7c5 !important;
font-size: 14px !important;
position: relative !important;
z-index: 2 !important;
}
.site-footer a {
color: #edcf79 !important;
}
/* =========================================================
ACTIVE NAVIGATION PAGE
========================================================= */
.main-nav a {
position: relative;
padding: 8px 0;
}
/* active page colour */
.main-nav a.active {
color: #edcf79 !important;
}
/* gold line under current page */
.main-nav a.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
height: 3px;
border-radius: 20px;
background:
linear-gradient(
90deg,
#c28a27,
#f0d179,
#c28a27
);
width: 100% !important;
}
/* small gold marker */
.main-nav a.active::before {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
transform:
translateX(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: #edcf79;
}
/* =========================================================
ACTIVE NAVIGATION - TEXT HIGHLIGHT ONLY
========================================================= */
.main-nav a.active {
color: #edcf79 !important;
}
/* remove active underline */
.main-nav a.active::after,
.main-nav a.active::before {
display: none !important;
}
/* also remove hover underline if you don't want any line at all */
.main-nav a::after {
display: none !important;
}
/* =========================================================
PANIGRAHANAM - SAME WEDDING BACKGROUND ON ALL PAGES
KEEP THIS AS THE VERY LAST BLOCK IN style.css
========================================================= */
/* =========================================================
GLOBAL WEBSITE BACKGROUND
========================================================= */
html,
body {
min-height: 100%;
}
body {
background:
linear-gradient(
rgba(92, 14, 26, 0.48),
rgba(72, 8, 18, 0.62)
),
url('/assets/images/wedding-bg.jpg')
center top / cover fixed
!important;
background-repeat:
no-repeat !important;
background-color:
#4a0710 !important;
}
/* =========================================================
KEEP MAIN CONTENT TRANSPARENT
SO THE WEDDING BACKGROUND SHOWS THROUGH
========================================================= */
main,
.page-shell,
.profile-form-shell,
.profile-page-wrap,
.profile-view-shell,
.admin-dashboard-page,
.member-profile-page,
.interest-page,
.resend-page,
.verify-page {
background:
transparent !important;
}
/* =========================================================
REMOVE OLD SOLID PAGE BACKGROUNDS
========================================================= */
.home-search-section,
.home-features-section,
.how-it-works-section,
.trust-section,
.home-cta-section {
background:
transparent !important;
}
/* =========================================================
PAGE CARDS STAY LIGHT
========================================================= */
.form-box,
.form-section,
.page-heading,
.dashboard-card,
.empty-card,
.info-card,
.profile-preview,
.content-card,
.bvv-profile-card,
.admin-panel,
.admin-stat-card,
.admin-shortcut,
.member-profile-card,
.member-profile-actions,
.interest-card,
.resend-card,
.verify-card {
background:
linear-gradient(
145deg,
#fffdf8,
#f9edd8
) !important;
border-color:
rgba(213, 161, 53, 0.72) !important;
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.20) !important;
}
/* =========================================================
GENERAL PAGE HEADINGS / HERO PANELS
========================================================= */
.page-heading {
background:
linear-gradient(
145deg,
#fffdf8,
#f8ead2
) !important;
}
/* =========================================================
CONTACT / ABOUT PAGE LARGE HERO PANELS
KEEP THEM BURGUNDY BUT LET THEM FIT THE BACKGROUND
========================================================= */
.contact-hero,
.about-hero,
.page-hero {
background:
linear-gradient(
135deg,
rgba(83, 5, 18, 0.94),
rgba(119, 11, 29, 0.92)
) !important;
border:
1px solid rgba(213, 161, 53, 0.75) !important;
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.20) !important;
}
/* =========================================================
FORMS
========================================================= */
.form-box input,
.form-box select,
.form-box textarea,
.profile-form input,
.profile-form select,
.profile-form textarea {
background:
#fffdf9 !important;
}
/* =========================================================
DASHBOARD / SEARCH / ADMIN CONTENT
========================================================= */
.dashboard-shell,
.search-page,
.search-shell,
.admin-dashboard-page {
background:
transparent !important;
}
/* =========================================================
FOOTER + HEADER REMAIN SOLID
========================================================= */
.top-header {
background:
linear-gradient(
90deg,
#430710,
#5a0815,
#430710
) !important;
}
.site-footer {
background:
linear-gradient(
90deg,
#430710,
#5c0a16,
#430710
) !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
body {
background-attachment:
scroll !important;
background-position:
top center !important;
}
}
/* =========================================================
HOME PAGE - MATCH BACKGROUND VISIBILITY WITH OTHER PAGES
========================================================= */
.panigrahanam-home {
background:
linear-gradient(
rgba(92, 14, 26, 0.28),
rgba(72, 8, 18, 0.38)
),
url('/assets/images/wedding-bg.jpg')
center top / cover fixed
!important;
}
/* remove extra dark layers inside homepage */
.panigrahanam-home .pg-hero,
.panigrahanam-home .pg-search-section,
.panigrahanam-home .pg-feature-section {
background:
transparent !important;
}
/* remove any dark pseudo overlay from hero */
.panigrahanam-home .pg-hero::before {
background:
radial-gradient(
circle at 50% 0%,
rgba(232,196,106,.08),
transparent 28%
) !important;
opacity:
1 !important;
}
/* =========================================================
HEADER - PUSH BRAND TO LEFT EDGE
========================================================= */
.header-container {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding-left: 14px !important;
padding-right: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* BRAND CLOSER TO LEFT */
.brand {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* NAV STAYS ON RIGHT */
.main-nav {
margin-left: auto !important;
}
/* =========================================================
HOME PAGE BACKGROUND - BRIGHTER / MORE VISIBLE
========================================================= */
.panigrahanam-home {
background:
linear-gradient(
rgba(92, 14, 26, 0.12),
rgba(72, 8, 18, 0.20)
),
url('/assets/images/wedding-bg.jpg')
center top / cover fixed
!important;
}
/* make sure homepage sections don't darken it again */
.panigrahanam-home .pg-hero,
.panigrahanam-home .pg-search-section,
.panigrahanam-home .pg-feature-section {
background: transparent !important;
}
/* remove any extra overlay */
.panigrahanam-home .pg-hero::before {
display: none !important;
}
/* =========================================================
FINAL HOME BACKGROUND FIX
MAKE HOME MATCH ABOUT / CONTACT
========================================================= */
body {
background:
linear-gradient(
rgba(92, 14, 26, 0.18),
rgba(72, 8, 18, 0.24)
),
url('/assets/images/wedding-bg.jpg')
center top / cover fixed
!important;
background-repeat: no-repeat !important;
}
/* HOME SHOULD USE BODY BACKGROUND ONLY */
.panigrahanam-home,
body main.panigrahanam-home,
main.panigrahanam-home {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
}
/* REMOVE EXTRA DARK LAYERS FROM HOME */
.panigrahanam-home .pg-hero,
.panigrahanam-home .pg-search-section,
.panigrahanam-home .pg-feature-section {
background: transparent !important;
background-image: none !important;
}
/* REMOVE HERO OVERLAY */
.panigrahanam-home .pg-hero::before {
display: none !important;
background: none !important;
}
/* =========================================================
PANIGRAHANAM MOBILE WEB APP
========================================================= */
.mobile-menu-button {
display: none;
}
/* =========================================================
TABLET + PHONE
========================================================= */
@media (max-width: 900px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
padding-top: 82px !important;
padding-bottom: 0 !important;
background-attachment: scroll !important;
}
/* =====================================================
MOBILE HEADER
===================================================== */
.top-header {
height: auto !important;
min-height: 76px;
overflow: visible !important;
}
.top-header::after {
display: none !important;
}
.header-container {
width: 100% !important;
min-height: 76px;
padding:
7px 14px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
}
/* LOGO */
.brand {
flex: 1;
min-width: 0;
gap: 9px !important;
}
.brand-logo-circle {
width: 59px !important;
height: 59px !important;
min-width: 59px !important;
min-height: 59px !important;
flex: 0 0 59px !important;
border-width: 1.5px !important;
}
.brand-logo-circle img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.brand-text {
min-width: 0;
}
.brand h1 {
font-size: 22px !important;
line-height: 1.05 !important;
white-space: nowrap;
}
.brand p {
margin-top: 3px !important;
font-size: 10px !important;
white-space: nowrap;
}
/* =====================================================
HAMBURGER
===================================================== */
.mobile-menu-button {
width: 44px;
height: 44px;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
flex-shrink: 0;
border:
1px solid rgba(232,196,106,.50);
border-radius: 11px;
background:
rgba(255,255,255,.06);
cursor: pointer;
}
.mobile-menu-button span {
display: block;
width: 100%;
height: 2px;
border-radius: 20px;
background: #edcf79;
transition:
transform .2s ease,
opacity .2s ease;
}
.mobile-menu-button.open span:nth-child(1) {
transform:
translateY(7px)
rotate(45deg);
}
.mobile-menu-button.open span:nth-child(2) {
opacity: 0;
}
.mobile-menu-button.open span:nth-child(3) {
transform:
translateY(-7px)
rotate(-45deg);
}
/* =====================================================
MOBILE NAVIGATION
===================================================== */
.main-nav {
position: absolute;
top: calc(100% + 1px);
left: 10px;
right: 10px;
margin: 0 !important;
padding: 10px !important;
display: none !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 2px !important;
white-space: normal !important;
background:
linear-gradient(
145deg,
#4a0710,
#610b18
);
border:
1px solid rgba(232,196,106,.55);
border-radius:
0 0 16px 16px;
box-shadow:
0 16px 35px rgba(0,0,0,.35);
z-index: 30000;
}
.main-nav.mobile-open {
display: flex !important;
}
.main-nav > a {
width: 100%;
padding: 13px 14px !important;
border-radius: 9px;
font-size: 15px !important;
text-align: left;
}
.main-nav > a:hover,
.main-nav > a.active {
background:
rgba(232,196,106,.10);
color:
#edcf79 !important;
}
/* USER DROPDOWN */
.user-dropdown {
width: 100%;
}
.user-dropbtn {
width: 100%;
display: flex;
justify-content: space-between;
padding:
12px 14px !important;
border-radius:
9px !important;
}
.user-dropdown-content {
position: static !important;
width: 100%;
margin-top: 6px;
box-shadow: none !important;
border-radius: 9px !important;
}
/* =====================================================
HOME HERO
===================================================== */
.panigrahanam-home .pg-hero {
padding:
24px 13px 28px !important;
}
.pg-hero-grid {
display: grid !important;
grid-template-columns:
repeat(2, 1fr) !important;
gap: 12px !important;
}
.pg-hero-card {
grid-column:
1 / -1;
grid-row:
1;
padding:
29px 19px !important;
border-radius:
19px !important;
}
.pg-hero-card h1 {
font-size:
clamp(37px, 11vw, 50px)
!important;
}
.pg-telugu {
font-size:
16px !important;
line-height:
1.5 !important;
}
.pg-divider {
width:
150px !important;
margin:
13px auto !important;
}
.pg-hero-main {
font-size:
24px !important;
}
.pg-hero-sub {
font-size:
14px !important;
line-height:
1.6 !important;
}
/* KEEP BOTH WEDDING IMAGES */
.pg-side-image {
display:
block !important;
transform:
none !important;
border-radius:
15px !important;
}
.pg-side-image img {
width:
100% !important;
height:
150px !important;
border-radius:
12px !important;
object-fit:
cover !important;
}
.pg-side-image.left {
grid-column: 1;
grid-row: 2;
}
.pg-side-image.right {
grid-column: 2;
grid-row: 2;
}
/* =====================================================
SEARCH CARD
===================================================== */
.pg-search-section {
padding:
18px 13px !important;
}
.pg-search-card {
width:
100% !important;
padding:
21px 17px !important;
border-radius:
16px !important;
}
.pg-search-header h2 {
font-size:
25px !important;
}
.pg-search-header p {
font-size:
14px;
}
.pg-search-grid {
display:
grid !important;
grid-template-columns:
1fr 1fr !important;
gap:
13px !important;
}
.pg-search-field:first-child,
.pg-search-button {
grid-column:
1 / -1;
}
.pg-search-field select {
width:
100%;
min-height:
48px !important;
font-size:
16px !important;
}
.pg-search-button {
width:
100%;
min-height:
50px !important;
margin-top:
3px;
}
/* =====================================================
FEATURE CARDS
===================================================== */
.pg-feature-section {
padding:
4px 13px 25px !important;
}
.pg-feature-grid {
grid-template-columns:
1fr !important;
gap:
12px !important;
}
.pg-feature-card {
grid-template-columns:
54px 1fr !important;
padding:
17px !important;
border-radius:
14px !important;
}
.pg-feature-icon {
width:
51px !important;
height:
51px !important;
font-size:
22px !important;
}
/* =====================================================
STATS
===================================================== */
.pg-stats-band {
padding:
13px !important;
}
.pg-stats-inner {
grid-template-columns:
repeat(2, 1fr) !important;
}
.pg-stat {
min-height:
76px !important;
padding:
11px !important;
justify-content:
flex-start !important;
gap:
10px !important;
}
.pg-stat:nth-child(2n) {
border-right:
none !important;
}
.pg-stat-icon {
min-width:
31px !important;
font-size:
25px !important;
}
.pg-stat strong {
font-size:
20px !important;
}
.pg-stat span {
font-size:
11px !important;
}
/* =====================================================
ABOUT / CONTACT / GENERAL CONTENT
===================================================== */
.page-shell,
.profile-form-shell,
.profile-view-shell,
.profile-page-wrap {
width:
100% !important;
margin:
22px auto 35px !important;
padding:
0 13px !important;
}
.about-page,
.contact-page {
padding:
24px 13px 40px !important;
}
.about-hero,
.contact-hero,
.page-hero {
padding:
31px 20px !important;
border-radius:
17px !important;
}
.about-hero h1,
.contact-hero h1,
.page-hero h1 {
font-size:
34px !important;
line-height:
1.15 !important;
}
.about-grid,
.contact-grid {
grid-template-columns:
1fr !important;
gap:
15px !important;
}
.about-card,
.contact-info-card,
.contact-form-card {
padding:
22px 19px !important;
border-radius:
16px !important;
}
/* =====================================================
LOGIN / REGISTER / FORGOT PASSWORD
===================================================== */
.form-box {
width:
calc(100% - 26px) !important;
margin:
25px auto 35px !important;
padding:
25px 19px !important;
border-radius:
17px !important;
}
.form-box h2 {
font-size:
31px !important;
}
.form-box input,
.form-box select,
.form-box textarea {
min-height:
49px;
font-size:
16px !important;
}
.form-box .btn {
min-height:
49px;
}
/* CLOUDFLARE */
.cf-turnstile {
max-width:
100%;
overflow-x:
auto;
}
/* =====================================================
PROFILE FORM
===================================================== */
.page-heading {
display:
block !important;
padding:
23px 19px !important;
border-radius:
17px !important;
}
.page-heading h2 {
font-size:
30px !important;
}
.page-heading .btn {
margin-top:
15px;
}
.form-section {
padding:
23px 18px !important;
border-radius:
16px !important;
}
.form-section h3 {
font-size:
21px !important;
}
.form-grid {
grid-template-columns:
1fr !important;
gap:
17px !important;
}
.form-grid .span-2 {
grid-column:
auto !important;
}
.checkbox-grid {
grid-template-columns:
1fr !important;
}
/* =====================================================
PROFILE TABLE
===================================================== */
.bvv-profile-card {
overflow-x:
auto !important;
}
.bvv-profile-table {
min-width:
680px;
}
/* =====================================================
DASHBOARD
===================================================== */
.user-dashboard-shell {
padding:
20px 13px 35px !important;
}
.user-dashboard-hero,
.user-dashboard-grid,
.dashboard-grid {
grid-template-columns:
1fr !important;
}
.user-dashboard-stats {
grid-template-columns:
repeat(2,1fr) !important;
}
.user-dashboard-panel,
.user-dashboard-hero-left,
.user-dashboard-hero-right {
padding:
20px 17px !important;
border-radius:
15px !important;
}
/* =====================================================
BUTTONS
===================================================== */
.btn {
min-height:
46px;
padding:
11px 20px !important;
touch-action:
manipulation;
}
/* =====================================================
FOOTER
Don't fix footer on mobile - feels much better
===================================================== */
.site-footer {
position:
relative !important;
left:
auto !important;
right:
auto !important;
bottom:
auto !important;
width:
100% !important;
min-height:
58px !important;
padding:
17px 12px !important;
font-size:
12px !important;
}
}
/* =========================================================
SMALL PHONES
========================================================= */
@media (max-width: 480px) {
.header-container {
padding:
7px 9px !important;
}
.brand-logo-circle {
width:
53px !important;
height:
53px !important;
min-width:
53px !important;
min-height:
53px !important;
flex-basis:
53px !important;
}
.brand h1 {
font-size:
19px !important;
}
.brand p {
font-size:
9px !important;
}
.mobile-menu-button {
width:
41px;
height:
41px;
}
.pg-hero-card h1 {
font-size:
36px !important;
}
.pg-side-image img {
height:
125px !important;
}
.pg-search-grid {
grid-template-columns:
1fr !important;
}
.pg-search-field {
grid-column:
1 !important;
}
.pg-stats-inner {
grid-template-columns:
1fr !important;
}
.pg-stat {
border-right:
none !important;
border-bottom:
1px solid rgba(232,196,106,.28) !important;
}
.user-dashboard-stats {
grid-template-columns:
1fr !important;
}
}
/* =========================================================
PANIGRAHANAM MOBILE APP BOTTOM NAV
========================================================= */
.mobile-bottom-nav {
display: none;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 900px) {
/* -----------------------------------------------------
REMOVE LOGIN FROM HAMBURGER
----------------------------------------------------- */
.main-nav .desktop-login-link {
display: none !important;
}
/* -----------------------------------------------------
HIDE WEBSITE FOOTER
----------------------------------------------------- */
.desktop-footer {
display: none !important;
}
/* -----------------------------------------------------
ALLOW ROOM FOR APP FOOTER
----------------------------------------------------- */
body {
padding-bottom:
82px !important;
}
/* =====================================================
APP BOTTOM BAR
===================================================== */
.mobile-bottom-nav {
position:
fixed;
left:
0;
right:
0;
bottom:
0;
z-index:
999999;
height:
78px;
display:
grid !important;
grid-template-columns:
repeat(4, 1fr);
align-items:
stretch;
padding:
4px 8px
max(
6px,
env(safe-area-inset-bottom)
);
background:
linear-gradient(
90deg,
#72101d 0%,
#8c1523 46%,
#b47217 100%
);
border-top:
1px solid
rgba(239,208,118,.7);
box-shadow:
0 -8px 25px
rgba(0,0,0,.30);
}
/* =====================================================
EACH ITEM
===================================================== */
.mobile-nav-item {
position:
relative;
min-width:
0;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
gap:
4px;
margin:
3px 1px;
border-radius:
14px;
color:
#fff9ed;
text-decoration:
none;
-webkit-tap-highlight-color:
transparent;
transition:
background .2s ease,
color .2s ease,
transform .15s ease;
}
.mobile-nav-item:active {
transform:
scale(.96);
}
/* =====================================================
SVG ICONS
===================================================== */
.mobile-nav-icon {
width:
27px;
height:
27px;
display:
flex;
align-items:
center;
justify-content:
center;
}
.mobile-nav-icon svg {
width:
26px;
height:
26px;
fill:
currentColor;
stroke:
currentColor;
stroke-width:
1.7;
stroke-linecap:
round;
stroke-linejoin:
round;
}
.mobile-nav-label {
font-size:
11px;
line-height:
1;
font-weight:
700;
white-space:
nowrap;
}
/* =====================================================
CURRENT TAB
===================================================== */
.mobile-nav-item.active {
background:
rgba(255,255,255,.11);
color:
#ffe394;
}
.mobile-nav-item.active::before {
content:
"";
position:
absolute;
left:
12px;
right:
12px;
top:
0;
height:
3px;
border-radius:
0 0 4px 4px;
background:
#f1cf70;
}
/* =====================================================
IPHONE SAFE AREA
===================================================== */
@supports (
padding-bottom:
env(safe-area-inset-bottom)
) {
.mobile-bottom-nav {
height:
calc(
72px
+
env(safe-area-inset-bottom)
);
padding-bottom:
env(safe-area-inset-bottom);
}
body {
padding-bottom:
calc(
82px
+
env(safe-area-inset-bottom)
)
!important;
}
}
}
/* =========================================================
MOBILE BACKGROUND FIX
STOP WEDDING IMAGE FROM ZOOMING
========================================================= */
@media (max-width: 900px) {
html,
body {
background-color: #4a0710 !important;
}
body {
background-image:
linear-gradient(
rgba(92, 14, 26, 0.16),
rgba(72, 8, 18, 0.22)
),
url('/assets/images/wedding-bg.jpg') !important;
/* IMPORTANT:
fit background to phone width */
background-size:
100% auto !important;
background-position:
top center !important;
background-repeat:
no-repeat !important;
background-attachment:
scroll !important;
}
/* =====================================================
ALL PAGE WRAPPERS USE BODY BACKGROUND
===================================================== */
.panigrahanam-home,
main.panigrahanam-home,
.about-page,
.contact-page,
.search-page,
.search-shell,
.page-shell,
.profile-form-shell,
.profile-view-shell,
.profile-page-wrap,
.user-dashboard-shell,
.admin-dashboard-page,
.verify-page,
.resend-page {
background:
transparent !important;
background-image:
none !important;
}
/* remove homepage-specific background layers */
.panigrahanam-home .pg-hero,
.panigrahanam-home .pg-search-section,
.panigrahanam-home .pg-feature-section {
background:
transparent !important;
background-image:
none !important;
}
.panigrahanam-home .pg-hero::before {
display:
none !important;
}
}
/* =========================================
DESKTOP / MOBILE ACCOUNT MENU
========================================= */
.mobile-account-links {
display: none;
}
@media (max-width: 900px) {
/* hide name dropdown on mobile */
.desktop-account-menu {
display: none !important;
}
/* show simple hamburger links instead */
.mobile-account-links {
display: contents;
}
.mobile-account-links a {
width: 100%;
padding: 13px 14px;
border-radius: 9px;
color: #fff8ed !important;
text-decoration: none;
font-weight: 700;
}
.mobile-account-links a:hover {
background:
rgba(232,196,106,.10);
}
}
/* =========================================================
MOBILE HEADER - REMOVE ACCOUNT/NAME FROM HAMBURGER
========================================================= */
@media (max-width: 900px) {
.desktop-account-menu {
display: none !important;
}
.desktop-login-link {
display: none !important;
}
}
/* =========================================================
PANIGRAHANAM
FINAL MOBILE APP LAYOUT FIX
========================================================= */
@media (max-width: 900px) {
/* =====================================================
PAGE
===================================================== */
html,
body {
width: 100%;
max-width: 100%;
min-height: 100%;
margin: 0 !important;
overflow-x: hidden !important;
}
body {
/*
* Space for fixed header +
* fixed bottom app navigation.
*/
padding-top: 92px !important;
padding-bottom:
calc(
82px
+ env(safe-area-inset-bottom)
) !important;
}
/* =====================================================
FIXED MOBILE HEADER
===================================================== */
.top-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 900000 !important;
margin: 0 !important;
background:
linear-gradient(
90deg,
#520711,
#750d1b,
#520711
) !important;
border-bottom:
1px solid #d5a135 !important;
box-shadow:
0 4px 18px
rgba(0,0,0,.24) !important;
overflow:
visible !important;
}
.header-container {
width: 100% !important;
max-width: none !important;
min-height: 82px !important;
margin: 0 !important;
padding:
7px 12px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content:
space-between !important;
}
/* =====================================================
MOBILE BRAND
===================================================== */
.brand {
display: flex !important;
align-items: center !important;
gap: 9px !important;
min-width: 0;
text-decoration: none !important;
}
.brand-logo-circle {
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
flex:
0 0 60px !important;
border-radius:
50% !important;
overflow:
hidden !important;
}
.brand-logo-circle img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
}
.brand h1 {
margin: 0 !important;
font-size:
22px !important;
line-height:
1.05 !important;
}
.brand p {
margin:
3px 0 0 !important;
font-size:
10px !important;
white-space:
nowrap;
}
/* =====================================================
HAMBURGER
===================================================== */
.mobile-menu-button {
display: flex !important;
width: 46px !important;
height: 46px !important;
padding:
10px !important;
flex-direction:
column;
justify-content:
center;
gap:
5px;
flex-shrink:
0;
border:
1px solid
rgba(232,196,106,.58) !important;
border-radius:
12px !important;
background:
rgba(255,255,255,.05) !important;
cursor:
pointer !important;
position:
relative;
z-index:
900010 !important;
}
.mobile-menu-button span {
width: 100%;
height: 2px;
display: block;
background:
#edcf79;
border-radius:
20px;
}
/* =====================================================
HAMBURGER PANEL
===================================================== */
.main-nav {
display:
none !important;
position:
absolute !important;
top:
100% !important;
left:
10px !important;
right:
10px !important;
width:
auto !important;
margin:
0 !important;
padding:
9px !important;
flex-direction:
column !important;
align-items:
stretch !important;
gap:
2px !important;
background:
linear-gradient(
145deg,
#4a0710,
#690c19
) !important;
border:
1px solid
rgba(232,196,106,.55);
border-radius:
0 0 16px 16px;
box-shadow:
0 18px 40px
rgba(0,0,0,.4);
z-index:
900020 !important;
}
.main-nav.mobile-open {
display:
flex !important;
}
.main-nav > a {
width:
100% !important;
padding:
13px 14px !important;
color:
#fff8ed !important;
text-align:
left !important;
text-decoration:
none !important;
border-radius:
9px !important;
}
/*
* IMPORTANT:
* Name dropdown is desktop only.
*/
.desktop-account-menu,
.user-dropdown.desktop-account-menu {
display:
none !important;
}
.desktop-login-link {
display:
none !important;
}
/* =====================================================
HIDE NORMAL WEBSITE FOOTER
===================================================== */
.desktop-footer,
.site-footer.desktop-footer {
display:
none !important;
}
/* =====================================================
MOBILE APP FOOTER
===================================================== */
.mobile-bottom-nav {
position:
fixed !important;
left:
0 !important;
right:
0 !important;
bottom:
0 !important;
width:
100% !important;
height:
calc(
74px
+ env(safe-area-inset-bottom)
) !important;
padding:
4px 8px
env(safe-area-inset-bottom)
!important;
display:
grid !important;
grid-template-columns:
repeat(4, 1fr)
!important;
align-items:
stretch !important;
background:
linear-gradient(
90deg,
#7a101e 0%,
#a41626 55%,
#bb781a 100%
) !important;
border-top:
1px solid
rgba(239,208,118,.80)
!important;
box-shadow:
0 -8px 25px
rgba(0,0,0,.30);
z-index:
950000 !important;
overflow:
visible !important;
}
/* =====================================================
EACH BOTTOM ITEM
===================================================== */
.mobile-nav-item {
appearance:
none !important;
-webkit-appearance:
none !important;
position:
relative !important;
width:
auto !important;
min-width:
0 !important;
height:
62px !important;
margin:
3px 2px !important;
padding:
5px 3px !important;
display:
flex !important;
flex-direction:
column !important;
align-items:
center !important;
justify-content:
center !important;
gap:
4px !important;
color:
#fff9ed !important;
background:
transparent !important;
border:
0 !important;
border-radius:
14px !important;
outline:
none !important;
text-decoration:
none !important;
font-family:
inherit !important;
cursor:
pointer !important;
pointer-events:
auto !important;
touch-action:
manipulation !important;
-webkit-tap-highlight-color:
transparent;
z-index:
950010 !important;
}
/* FIX ACCOUNT BUTTON */
button.mobile-nav-item,
.mobile-account-button {
opacity:
1 !important;
background:
transparent !important;
color:
#fff9ed !important;
cursor:
pointer !important;
pointer-events:
auto !important;
}
/* ICON */
.mobile-nav-icon {
width:
27px !important;
height:
27px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
color:
inherit !important;
}
.mobile-nav-icon svg {
width:
26px !important;
height:
26px !important;
fill:
currentColor;
stroke:
currentColor;
stroke-width:
1.7;
stroke-linecap:
round;
stroke-linejoin:
round;
}
.mobile-nav-label {
color:
inherit !important;
font-size:
11px !important;
font-weight:
700 !important;
line-height:
1 !important;
white-space:
nowrap;
}
/* CURRENT PAGE */
.mobile-nav-item.active {
color:
#ffe394 !important;
background:
rgba(255,255,255,.12)
!important;
}
.mobile-nav-item.active::before {
content:
"";
position:
absolute;
top:
-4px;
left:
25%;
right:
25%;
height:
3px;
border-radius:
3px;
background:
#f1cf70;
}
/* =====================================================
ACCOUNT OVERLAY
===================================================== */
.mobile-account-sheet {
position:
fixed !important;
inset:
0 !important;
width:
100% !important;
height:
100% !important;
display:
none !important;
align-items:
flex-end !important;
background:
rgba(0,0,0,.48)
!important;
z-index:
999999 !important;
pointer-events:
none !important;
}
/*
* This prevents things such as the
* "S" avatar leaking behind the footer.
*/
.mobile-account-sheet:not(.show) {
visibility:
hidden !important;
opacity:
0 !important;
}
.mobile-account-sheet.show {
display:
flex !important;
visibility:
visible !important;
opacity:
1 !important;
pointer-events:
auto !important;
}
/* =====================================================
ACCOUNT BOTTOM SHEET
===================================================== */
.mobile-account-sheet-inner {
position:
relative;
width:
100% !important;
margin:
0 !important;
padding:
10px 18px
calc(
88px
+ env(safe-area-inset-bottom)
)
!important;
background:
linear-gradient(
145deg,
#fffdf7,
#f6e4c7
) !important;
border-top:
2px solid #d2a03b;
border-radius:
24px 24px 0 0
!important;
box-shadow:
0 -18px 45px
rgba(0,0,0,.34);
transform:
translateY(0);
z-index:
1000000;
}
.mobile-account-sheet-handle {
width:
48px;
height:
5px;
margin:
1px auto 17px;
border-radius:
20px;
background:
#c9ad76;
}
/* =====================================================
ACCOUNT USER
===================================================== */
.mobile-account-user {
display:
grid;
grid-template-columns:
52px 1fr 40px;
gap:
12px;
align-items:
center;
padding-bottom:
15px;
border-bottom:
1px solid #ead2a6;
}
.mobile-account-avatar {
width:
52px;
height:
52px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
50%;
background:
linear-gradient(
145deg,
#e2b64a,
#b97b17
);
color:
#65000d;
font-family:
Georgia,
serif;
font-size:
22px;
font-weight:
700;
}
.mobile-account-user small {
display:
block;
color:
#907375;
font-size:
11px;
}
.mobile-account-user h3 {
margin:
3px 0 0;
color:
#65000d;
font-size:
19px;
line-height:
1.2;
}
.mobile-account-close {
width:
38px;
height:
38px;
border:
0;
border-radius:
50%;
background:
#f3e4ca;
color:
#65000d;
font-size:
25px;
cursor:
pointer;
}
/* =====================================================
ACCOUNT OPTIONS
===================================================== */
.mobile-account-option {
width:
100%;
min-height:
53px;
display:
flex !important;
align-items:
center;
gap:
13px;
padding:
12px 5px;
border-bottom:
1px solid #ead2a6;
color:
#510710 !important;
text-decoration:
none !important;
font-size:
16px;
font-weight:
700;
pointer-events:
auto !important;
}
.mobile-account-option span:first-child {
width:
31px;
display:
inline-flex;
justify-content:
center;
color:
#b57a19;
font-size:
20px;
}
.mobile-account-logout {
color:
#ad1b2e !important;
border-bottom:
0 !important;
}
}
/* =========================================================
DESKTOP USER DROPDOWN - RESTORE DARK STYLE
========================================================= */
@media (min-width: 901px) {
.user-dropdown {
position: relative !important;
}
.user-dropbtn {
background:
linear-gradient(
135deg,
#7a0d1c,
#5a0711
) !important;
color: #fff8ed !important;
border:
1px solid rgba(213, 161, 53, .55) !important;
border-radius:
24px !important;
padding:
11px 18px !important;
font-weight:
700 !important;
cursor:
pointer !important;
box-shadow:
0 6px 16px rgba(0,0,0,.18) !important;
}
.user-dropdown-content {
display:
none;
position:
absolute !important;
top:
calc(100% + 8px) !important;
right:
0 !important;
min-width:
230px !important;
padding:
8px !important;
background:
linear-gradient(
145deg,
#4a0710,
#650c18
) !important;
border:
1px solid rgba(213,161,53,.55) !important;
border-radius:
14px !important;
box-shadow:
0 14px 34px rgba(0,0,0,.34) !important;
overflow:
hidden !important;
z-index:
999999 !important;
}
.user-dropdown-content.show {
display:
block !important;
}
.user-dropdown-content a {
display:
block !important;
padding:
12px 14px !important;
color:
#fff8ed !important;
text-decoration:
none !important;
border-radius:
8px !important;
font-size:
14px !important;
font-weight:
600 !important;
background:
transparent !important;
}
.user-dropdown-content a:hover {
background:
rgba(232,196,106,.12) !important;
color:
#edcf79 !important;
}
.user-dropdown-content a + a {
margin-top:
2px;
}
}
/* =========================================================
FINAL MOBILE FIXED HEADER + FOOTER
KEEP THIS AS THE LAST BLOCK IN style.css
========================================================= */
@media (max-width: 900px) {
html,
body {
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
/* =====================================================
FIXED HEADER
===================================================== */
.top-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 999900 !important;
margin: 0 !important;
transform: none !important;
will-change: auto !important;
}
.header-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
position: relative !important;
}
/* =====================================================
FIXED MOBILE APP FOOTER
===================================================== */
.mobile-bottom-nav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
z-index: 999950 !important;
margin: 0 !important;
transform: none !important;
will-change: auto !important;
}
/* normal desktop footer stays hidden on mobile */
.desktop-footer,
.site-footer.desktop-footer {
display: none !important;
}
/* =====================================================
SPACE SO CONTENT DOESN'T GO UNDER HEADER/FOOTER
===================================================== */
body {
padding-top: 88px !important;
padding-bottom:
calc(
82px
+ env(safe-area-inset-bottom)
) !important;
}
/* =====================================================
PREVENT PAGE WRAPPERS FROM BREAKING FIXED POSITIONING
===================================================== */
main,
.panigrahanam-home,
.about-page,
.contact-page,
.search-page,
.search-shell,
.page-shell,
.profile-form-shell,
.profile-view-shell,
.profile-page-wrap,
.user-dashboard-shell,
.admin-dashboard-page {
transform: none !important;
perspective: none !important;
filter: none !important;
}
}
/* =========================================================
LOGIN PAGE - FIXED MOBILE APP SHELL
========================================================= */
@media screen and (max-width: 900px) {
body.page-login {
margin: 0 !important;
width: 100% !important;
min-height: 100dvh !important;
padding-top: 88px !important;
padding-bottom:
calc(
82px
+ env(safe-area-inset-bottom)
) !important;
overflow-x: hidden !important;
}
body.page-login .top-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 999990 !important;
}
body.page-login .mobile-bottom-nav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
z-index: 999995 !important;
}
body.page-login .form-box {
width:
calc(100% - 26px) !important;
margin:
24px auto 35px !important;
position:
relative !important;
}
body.page-login .desktop-footer,
body.page-login .site-footer.desktop-footer {
display: none !important;
}
}
/* =========================================================
PANIGRAHANAM MOBILE APP SHELL - FINAL OVERRIDE
Keep this as the final block in style.css.
========================================================= */
.app-page-content {
min-height: 1px;
}
@media screen and (max-width: 900px) {
:root {
--mobile-header-h: 82px;
--mobile-nav-h: 74px;
}
html,
body {
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
overscroll-behavior: none;
}
body {
position: fixed !important;
inset: 0 !important;
background: #4a0710 !important;
}
/* Fixed header */
.top-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: var(--mobile-header-h) !important;
margin: 0 !important;
z-index: 1000000 !important;
overflow: visible !important;
transform: none !important;
background: linear-gradient(90deg,#520711,#750d1b,#520711) !important;
border-bottom: 1px solid #d5a135 !important;
box-shadow: 0 4px 18px rgba(0,0,0,.28) !important;
}
.header-container {
width: 100% !important;
height: var(--mobile-header-h) !important;
max-width: none !important;
margin: 0 !important;
padding: 7px 12px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
position: relative !important;
}
.brand-logo-circle {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
flex: 0 0 56px !important;
}
.brand h1 {
font-size: 21px !important;
}
.brand p {
margin-top: 3px !important;
font-size: 9.5px !important;
}
/* Only the centre content scrolls */
.app-page-content {
position: fixed !important;
top: var(--mobile-header-h) !important;
left: 0 !important;
right: 0 !important;
bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
z-index: 1 !important;
background:
linear-gradient(rgba(92,14,26,.14), rgba(72,8,18,.20)),
url('/assets/images/wedding-bg.jpg') top center / 100% auto no-repeat,
#4a0710 !important;
}
.app-page-content > main,
.app-page-content .panigrahanam-home,
.app-page-content .about-page,
.app-page-content .contact-page,
.app-page-content .search-page,
.app-page-content .search-shell,
.app-page-content .page-shell,
.app-page-content .profile-form-shell,
.app-page-content .profile-view-shell,
.app-page-content .profile-page-wrap,
.app-page-content .user-dashboard-shell,
.app-page-content .admin-dashboard-page,
.app-page-content .verify-page,
.app-page-content .resend-page {
background: transparent !important;
background-image: none !important;
transform: none !important;
filter: none !important;
perspective: none !important;
}
/* Bottom app navigation */
.mobile-bottom-nav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important;
margin: 0 !important;
padding: 4px 8px env(safe-area-inset-bottom) !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
align-items: stretch !important;
z-index: 1000001 !important;
transform: none !important;
background: linear-gradient(90deg,#7a101e 0%,#a41626 55%,#b97818 100%) !important;
border-top: 1px solid rgba(239,208,118,.82) !important;
box-shadow: 0 -6px 20px rgba(0,0,0,.30) !important;
}
.desktop-footer,
.site-footer.desktop-footer,
.desktop-account-menu,
.desktop-login-link {
display: none !important;
}
.mobile-nav-item {
appearance: none !important;
-webkit-appearance: none !important;
min-width: 0 !important;
height: 62px !important;
margin: 3px 2px !important;
padding: 5px 2px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
border: 0 !important;
border-radius: 13px !important;
background: transparent !important;
color: #fff9ed !important;
text-decoration: none !important;
font-family: inherit !important;
cursor: pointer !important;
pointer-events: auto !important;
touch-action: manipulation !important;
}
.mobile-nav-item.active {
color: #ffe394 !important;
background: rgba(255,255,255,.11) !important;
}
.mobile-nav-item.active::before {
content: "";
position: absolute;
top: 0;
left: 26%;
right: 26%;
height: 3px;
border-radius: 0 0 4px 4px;
background: #f1cf70;
}
.mobile-nav-icon {
width: 27px !important;
height: 27px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.mobile-nav-icon svg {
width: 25px !important;
height: 25px !important;
fill: currentColor;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.mobile-nav-label {
font-size: 11px !important;
line-height: 1 !important;
font-weight: 700 !important;
color: inherit !important;
white-space: nowrap;
}
/* Hamburger */
.mobile-menu-button {
position: relative !important;
z-index: 1000010 !important;
}
.main-nav {
z-index: 1000009 !important;
}
/* Account bottom sheet */
.mobile-account-sheet {
position: fixed !important;
inset: 0 !important;
display: none !important;
align-items: flex-end !important;
background: rgba(0,0,0,.48) !important;
z-index: 2000000 !important;
pointer-events: none !important;
}
.mobile-account-sheet.show {
display: flex !important;
pointer-events: auto !important;
}
.mobile-account-sheet-inner {
width: 100% !important;
margin: 0 !important;
padding: 10px 18px calc(18px + env(safe-area-inset-bottom)) !important;
background: linear-gradient(145deg,#fffdf7,#f6e4c7) !important;
border-top: 2px solid #d2a03b !important;
border-radius: 24px 24px 0 0 !important;
box-shadow: 0 -18px 45px rgba(0,0,0,.34) !important;
}
.mobile-account-sheet-handle {
width: 48px;
height: 5px;
margin: 1px auto 17px;
border-radius: 20px;
background: #c9ad76;
}
.mobile-account-user {
display: grid;
grid-template-columns: 50px 1fr 38px;
gap: 12px;
align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid #ead2a6;
}
.mobile-account-avatar {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(145deg,#e2b64a,#b97b17);
color: #65000d;
font-family: Georgia,serif;
font-size: 21px;
font-weight: 700;
}
.mobile-account-user small {
display: block;
color: #907375;
font-size: 11px;
}
.mobile-account-user h3 {
margin: 3px 0 0;
color: #65000d;
font-size: 18px;
line-height: 1.2;
}
.mobile-account-close {
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: #f3e4ca;
color: #65000d;
font-size: 24px;
cursor: pointer;
}
.mobile-account-option {
width: 100%;
min-height: 52px;
display: flex !important;
align-items: center;
gap: 12px;
padding: 12px 5px;
border-bottom: 1px solid #ead2a6;
color: #510710 !important;
text-decoration: none !important;
font-size: 16px;
font-weight: 700;
}
.mobile-account-option-icon {
width: 30px;
display: inline-flex;
justify-content: center;
color: #b57a19;
font-size: 19px;
}
.mobile-account-logout {
color: #ad1b2e !important;
border-bottom: 0 !important;
}
/* Dashboard: tighter, more app-like */
.user-dashboard-shell {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 18px 14px 28px !important;
}
.user-dashboard-hero,
.user-dashboard-grid,
.user-dashboard-stats {
grid-template-columns: 1fr !important;
gap: 14px !important;
margin-bottom: 16px !important;
}
.user-dashboard-hero-left,
.user-dashboard-hero-right,
.user-dashboard-stat-card,
.user-dashboard-panel,
.user-dashboard-empty-card {
border-radius: 18px !important;
box-shadow: 0 10px 28px rgba(49,7,16,.14) !important;
}
.user-dashboard-hero-left,
.user-dashboard-hero-right,
.user-dashboard-panel,
.user-dashboard-empty-card {
padding: 20px 18px !important;
}
.user-dashboard-hero-left h1 {
font-size: 34px !important;
}
.user-dashboard-hero-left p {
font-size: 15px !important;
line-height: 1.55 !important;
}
.user-dashboard-stat-card {
padding: 18px !important;
}
.user-dashboard-stat-card strong {
font-size: 22px !important;
}
.user-dashboard-panel-head h2 {
font-size: 27px !important;
}
.user-dashboard-detail-row {
padding: 14px 15px !important;
}
}
/* =========================================================
MOBILE PROFILE TABLE
KEEP SECTION TITLE SAME WIDTH AS SCROLLING TABLE
========================================================= */
@media (max-width: 900px) {
/* horizontal scrolling area */
.profile-table-section {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* title must be as wide as the table */
.profile-table-section-title {
min-width: 760px;
box-sizing: border-box;
margin: 0 !important;
border-left: 1px solid #d5a135;
border-right: 1px solid #d5a135;
}
/* table uses identical width */
.profile-table-section .bvv-profile-table {
width: 760px !important;
min-width: 760px !important;
table-layout: fixed;
margin: 0 !important;
}
/* stop individual cells becoming wider unexpectedly */
.profile-table-section .bvv-profile-table th,
.profile-table-section .bvv-profile-table td {
box-sizing: border-box;
white-space: normal !important;
overflow-wrap: break-word;
word-break: normal;
}
}
.validation-error-list {
margin: 10px 0 0;
padding-left: 20px;
}
.validation-error-list li {
margin: 5px 0;
}
/* =========================================================
DESKTOP: HIDE ALL MOBILE-ONLY APP ELEMENTS
========================================================= */
@media (min-width: 901px) {
.mobile-bottom-nav,
.mobile-account-sheet,
.mobile-account-sheet-inner,
.mobile-account-user,
.mobile-account-option,
.mobile-account-close,
.mobile-account-avatar,
.mobile-account-links {
display: none !important;
}
}
.dashboard-alert {
margin-bottom: 24px;
padding: 18px 20px;
border-radius: 14px;
line-height: 1.55;
}
.dashboard-alert strong {
display: block;
margin-bottom: 6px;
font-size: 17px;
}
.dashboard-alert p {
margin: 0;
}
.dashboard-alert-warning {
background: #fff2c7;
border: 1px solid #dfbb52;
color: #6d4b08;
}
/* =========================================================
COOKIE BANNER
========================================================= */
.cookie-banner {
position: fixed;
left: 20px;
right: 20px;
bottom: 20px;
z-index: 99999;
background:
linear-gradient(
135deg,
#65000d,
#8b1224
);
color: #fff;
border:
1px solid
rgba(218, 168, 58, .9);
border-radius: 18px;
box-shadow:
0 18px 50px
rgba(0,0,0,.35);
}
.cookie-banner-inner {
max-width: 1250px;
margin: auto;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.cookie-banner-text {
max-width: 750px;
}
.cookie-banner-text strong {
display: block;
margin-bottom: 6px;
font-size: 19px;
color: #f3c95b;
}
.cookie-banner-text p {
margin: 0 0 7px;
line-height: 1.5;
color: #fff7ec;
}
.cookie-banner-text a {
color: #f3c95b;
font-weight: 700;
}
.cookie-banner-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.cookie-btn {
padding: 11px 17px;
border-radius: 999px;
border: 1px solid #dba637;
cursor: pointer;
font-weight: 800;
font-size: 14px;
}
.cookie-btn-primary {
background: #d99b20;
color: #4b090f;
}
.cookie-btn-secondary {
background: transparent;
color: #fff;
}
/* =========================================================
COOKIE SETTINGS MODAL
========================================================= */
.cookie-modal {
position: fixed;
inset: 0;
z-index: 100000;
background:
rgba(20,0,4,.70);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.cookie-modal-card {
position: relative;
width: min(520px,100%);
padding: 28px;
background: #fffaf0;
border-radius: 20px;
border: 1px solid #d6aa4c;
box-shadow:
0 22px 60px
rgba(0,0,0,.4);
}
.cookie-modal-card h2 {
margin-top: 0;
color: #65000d;
font-family:
Georgia,
"Times New Roman",
serif;
}
.cookie-modal-close {
position: absolute;
right: 16px;
top: 12px;
border: 0;
background: transparent;
font-size: 28px;
cursor: pointer;
color: #65000d;
}
.cookie-setting-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 0;
border-top:
1px solid #ead7ae;
}
.cookie-setting-row p {
margin: 5px 0 0;
color: #765d60;
line-height: 1.45;
}
.cookie-always-on {
white-space: nowrap;
font-weight: 800;
color: #2f6d43;
}
/* SWITCH */
.cookie-switch {
position: relative;
width: 50px;
height: 28px;
flex: 0 0 auto;
}
.cookie-switch input {
display: none;
}
.cookie-switch span {
position: absolute;
inset: 0;
border-radius: 999px;
background: #c9c2bc;
cursor: pointer;
}
.cookie-switch span::before {
content: "";
position: absolute;
width: 22px;
height: 22px;
left: 3px;
top: 3px;
border-radius: 50%;
background: #fff;
transition: .2s;
}
.cookie-switch input:checked + span {
background: #8b1224;
}
.cookie-switch input:checked + span::before {
transform:
translateX(22px);
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:700px) {
.cookie-banner {
left: 10px;
right: 10px;
bottom: 85px;
}
.cookie-banner-inner {
display: block;
padding: 18px;
}
.cookie-banner-actions {
margin-top: 15px;
}
.cookie-btn {
flex: 1 1 100%;
}
}
/* =========================================================
FORCE HIDDEN ELEMENTS TO STAY HIDDEN
========================================================= */
[hidden] {
display: none !important;
}
/* =========================================================
PANIGRAHANAM ASSISTANT
========================================================= */
.pani-chat-launcher {
position: fixed;
right: 24px;
bottom: 88px;
width: 74px;
height: 74px;
z-index: 100050;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
border-radius: 50%;
border:
2px solid
#e6b84a;
background:
linear-gradient(
145deg,
#7e0d20,
#520008
);
box-shadow:
0 12px 32px
rgba(65,0,8,.38);
cursor: pointer;
transition:
transform .2s ease,
box-shadow .2s ease;
}
.pani-chat-launcher:hover {
transform:
translateY(-3px)
scale(1.04);
box-shadow:
0 18px 42px
rgba(65,0,8,.45);
}
.pani-chat-launcher-image {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
background: #fff9ed;
}
.pani-chat-launcher-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pani-chat-launcher svg {
width: 100%;
height: 100%;
fill: none;
stroke: #f2c65d;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
CHAT WINDOW
========================================================= */
.pani-chat-window {
position: fixed;
right: 18px;
bottom: 138px;
width: 365px;
height: 560px;
z-index: 100049;
display: none;
flex-direction: column;
overflow: hidden;
background:
#fffaf1;
border:
1px solid
rgba(
214,
162,
58,
.7
);
border-radius: 20px;
box-shadow:
0 25px 70px
rgba(
45,
0,
7,
.35
);
}
.pani-chat-window.show {
display: flex;
}
/* =========================================================
HEADER
========================================================= */
.pani-chat-header {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
padding:
13px 15px;
background:
linear-gradient(
135deg,
#7d0b1c,
#580008
);
color: #fff;
}
.pani-chat-brand {
display: flex;
align-items: center;
gap: 10px;
}
.pani-chat-brand strong {
display: block;
color: #f3c85f;
font-size: 16px;
}
.pani-chat-brand small {
display: block;
margin-top: 3px;
color: #fff3df;
font-size: 12px;
}
.pani-chat-logo {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 50%;
background: #fff8ea;
border:
2px solid
#d6a23a;
}
.pani-chat-logo svg {
width: 31px;
height: 31px;
fill: none;
stroke: #720b18;
stroke-width: 2.5;
}
.pani-chat-close {
width: 34px;
height: 34px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
font-size: 25px;
cursor: pointer;
}
/* =========================================================
MESSAGES
========================================================= */
.pani-chat-messages {
flex: 1;
overflow-y: auto;
padding:
16px;
background:
linear-gradient(
180deg,
#fffaf2,
#fff7eb
);
scroll-behavior: smooth;
}
.pani-chat-message {
display: flex;
margin-bottom: 13px;
}
.pani-chat-user {
justify-content: flex-end;
}
.pani-chat-message-content {
max-width: 84%;
padding:
11px 13px;
border-radius: 15px;
line-height: 1.5;
font-size: 14px;
white-space: pre-wrap;
}
.pani-chat-assistant
.pani-chat-message-content {
background:
#f5ead7;
color:
#402427;
border-bottom-left-radius:
4px;
}
.pani-chat-user
.pani-chat-message-content {
background:
linear-gradient(
135deg,
#851124,
#65000d
);
color: #fff;
border-bottom-right-radius:
4px;
}
.pani-chat-message-content p {
margin:
6px 0;
}
.pani-chat-message-content ul {
margin:
7px 0;
padding-left:
19px;
}
/* =========================================================
RESPONSE LINKS
========================================================= */
.pani-chat-links {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 10px;
}
.pani-chat-links a {
display: inline-flex;
padding:
7px 10px;
border-radius:
999px;
background:
#d99d27;
color:
#4b0008;
text-decoration:
none;
font-size:
12px;
font-weight:
800;
}
/* =========================================================
QUICK QUESTIONS
========================================================= */
.pani-chat-suggestions {
display: flex;
gap: 7px;
overflow-x: auto;
padding:
10px 12px;
background:
#fffaf1;
border-top:
1px solid
#ead3a5;
}
.pani-chat-suggestions button {
white-space: nowrap;
padding:
7px 10px;
border:
1px solid
#d7a43e;
border-radius:
999px;
background:
transparent;
color:
#6f0c1b;
font-size:
11px;
font-weight:
700;
cursor: pointer;
}
/* =========================================================
INPUT
========================================================= */
.pani-chat-form {
display: grid;
grid-template-columns:
1fr 45px;
gap:
8px;
padding:
11px 12px;
background:
#fffdf8;
border-top:
1px solid
#ead6b2;
}
.pani-chat-form input {
width: 100%;
min-width: 0;
padding:
12px 14px;
border:
1px solid
#d6c6ad;
border-radius:
999px;
outline: none;
background:
#fff;
color:
#352224;
font-size:
14px;
}
.pani-chat-form input:focus {
border-color:
#d6a23a;
box-shadow:
0 0 0 3px
rgba(
214,
162,
58,
.14
);
}
.pani-chat-send {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background:
linear-gradient(
145deg,
#8a1024,
#65000d
);
cursor: pointer;
}
.pani-chat-send svg {
width: 21px;
height: 21px;
fill: #fff;
}
/* =========================================================
DISCLAIMER
========================================================= */
.pani-chat-note {
padding:
6px 12px 11px;
background:
#fffdf8;
text-align: center;
color:
#9a8780;
font-size:
10px;
}
/* =========================================================
TYPING
========================================================= */
.pani-chat-typing {
display: flex;
gap: 4px;
align-items: center;
}
.pani-chat-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background:
#8b1024;
animation:
paniTyping
1s infinite
ease-in-out;
}
.pani-chat-typing span:nth-child(2) {
animation-delay:
.15s;
}
.pani-chat-typing span:nth-child(3) {
animation-delay:
.3s;
}
@keyframes paniTyping {
0%,
100% {
opacity: .3;
transform:
translateY(0);
}
50% {
opacity: 1;
transform:
translateY(-3px);
}
}
@media (max-width: 768px) {
.pani-chat-launcher {
right: 14px;
bottom: 88px;
width: 58px;
height: 58px;
}
.pani-chat-window {
left: 10px;
right: 10px;
bottom: 154px;
width: auto;
height: calc(100vh - 210px);
max-height: 570px;
min-height: 380px;
}
}
/* =========================================================
FINAL CHAT POSITION/SIZE OVERRIDE
KEEP THIS AT VERY END OF style.css
========================================================= */
/* DESKTOP */
.pani-chat-launcher {
width: 46px !important;
height: 46px !important;
right: 14px !important;
bottom: 62px !important;
padding: 2px !important;
}
.pani-chat-launcher-image {
width: 38px !important;
height: 38px !important;
}
.pani-chat-launcher-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* OPEN CHAT WINDOW */
.pani-chat-window {
right: 14px !important;
bottom: 116px !important;
width: 350px !important;
height: 520px !important;
max-height: calc(100vh - 150px) !important;
}
/* MOBILE */
@media (max-width: 768px) {
.pani-chat-launcher {
width: 44px !important;
height: 44px !important;
right: 10px !important;
bottom: 72px !important;
}
.pani-chat-launcher-image {
width: 36px !important;
height: 36px !important;
}
.pani-chat-window {
left: 8px !important;
right: 8px !important;
bottom: 124px !important;
width: auto !important;
height: calc(100vh - 180px) !important;
max-height: 520px !important;
}
}
.pani-chat-tooltip {
position: absolute;
right: 54px;
top: 50%;
transform:
translateY(-50%)
translateX(6px);
white-space: nowrap;
padding: 8px 12px;
border-radius: 999px;
background: #fff8ec;
color: #6f0c1b;
border: 1px solid #d9a63c;
box-shadow:
0 8px 22px
rgba(50, 0, 6, .18);
font-size: 13px;
font-weight: 700;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
.pani-chat-launcher:hover
.pani-chat-tooltip {
opacity: 1;
visibility: visible;
transform:
translateY(-50%)
translateX(0);
}
@media (max-width: 768px) {
.pani-chat-tooltip {
display: none !important;
}
}
/* =========================================================
CHAT TOOLTIP - DESKTOP ONLY
========================================================= */
.pani-chat-tooltip {
position: absolute;
right: 54px;
top: 50%;
transform:
translateY(-50%)
translateX(6px);
white-space: nowrap;
padding: 7px 11px;
border-radius: 999px;
background: #fff8ec;
color: #6f0c1b;
border: 1px solid #d9a63c;
box-shadow:
0 7px 20px
rgba(50,0,6,.18);
font-size: 12px;
font-weight: 700;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
.pani-chat-launcher:hover
.pani-chat-tooltip {
opacity: 1;
visibility: visible;
transform:
translateY(-50%)
translateX(0);
}
/* =========================================================
MOBILE CHAT HINT
========================================================= */
.pani-chat-mobile-hint {
display: none;
}
@media (max-width: 768px) {
/* No desktop hover text on phones */
.pani-chat-tooltip {
display: none !important;
}
.pani-chat-mobile-hint {
position: absolute;
right: 50px;
top: 50%;
transform:
translateY(-50%);
white-space: nowrap;
padding: 7px 11px;
border-radius: 999px;
background: #fff8ec;
color: #6f0c1b;
border:
1px solid
#d9a63c;
box-shadow:
0 7px 20px
rgba(50,0,6,.18);
font-size: 12px;
font-weight: 700;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s ease,
visibility .2s ease;
}
.pani-chat-mobile-hint.show {
display: block;
opacity: 1;
visibility: visible;
}
}
/* =========================================================
CHAT MOBILE HINT
========================================================= */
.pani-chat-mobile-hint {
display: none;
}
/* Desktop hover tooltip */
.pani-chat-tooltip {
position: absolute;
right: 54px;
top: 50%;
transform:
translateY(-50%)
translateX(6px);
white-space: nowrap;
padding: 7px 11px;
border-radius: 999px;
background: #fff8ec;
color: #6f0c1b;
border: 1px solid #d9a63c;
box-shadow:
0 7px 20px
rgba(50,0,6,.18);
font-size: 12px;
font-weight: 700;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .18s ease,
transform .18s ease;
}
.pani-chat-launcher:hover
.pani-chat-tooltip {
opacity: 1;
visibility: visible;
transform:
translateY(-50%)
translateX(0);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
/*
* Never use hover tooltip on touch devices.
*/
.pani-chat-tooltip {
display: none !important;
}
.pani-chat-mobile-hint {
position: absolute;
right: 50px;
top: 50%;
transform:
translateY(-50%);
white-space: nowrap;
padding: 7px 11px;
border-radius: 999px;
background: #fff8ec;
color: #6f0c1b;
border:
1px solid #d9a63c;
box-shadow:
0 7px 20px
rgba(50,0,6,.18);
font-size: 12px;
font-weight: 700;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.pani-chat-mobile-hint.show {
display: block;
opacity: 1;
visibility: visible;
}
}
.dashboard-alert-success {
background: #e9f7ed;
border: 1px solid #9ac8a7;
color: #28613c;
}
.match-interest-section {
margin-top: 26px;
padding: 25px;
background: #fffaf1;
border: 1px solid #dfc18a;
border-radius: 20px;
box-shadow:
0 12px 30px
rgba(75,0,8,.08);
}
.match-interest-heading {
margin-bottom: 18px;
}
.match-interest-heading h2 {
margin: 0 0 5px;
color: #65000d;
font-family:
Georgia,
"Times New Roman",
serif;
}
.match-interest-heading p {
margin: 0;
color: #786161;
}
.match-interest-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.match-interest-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 16px 18px;
background: #fffdf9;
border: 1px solid #ead6af;
border-radius: 14px;
}
.match-interest-profile strong {
display: block;
color: #65000d;
font-size: 16px;
}
.match-interest-profile span {
display: block;
margin-top: 3px;
color: #5e4144;
}
.match-interest-profile small {
display: block;
margin-top: 5px;
color: #887171;
}
.match-interest-actions {
display: flex;
align-items: center;
gap: 8px;
}
.match-interest-actions form {
margin: 0;
}
.interest-status {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.interest-status.pending {
background: #fff2c7;
color: #73530b;
}
.interest-status.accepted {
background: #e3f4e8;
color: #28623d;
}
.interest-status.declined {
background: #f5e2e4;
color: #8b2837;
}
.match-interest-empty {
padding: 18px;
text-align: center;
border-radius: 12px;
background: #fff6e8;
color: #78615d;
}
.interest-card-status {
flex: 1;
text-align: center;
padding: 10px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.interest-waiting {
background: #fff1c4;
color: #76510a;
}
.interest-accepted {
background: #e4f5e9;
color: #27603a;
}
.interest-received {
background: #f4e6d2;
color: #6b1724;
text-decoration: none;
}
@media (max-width: 700px) {
.match-interest-card {
align-items: stretch;
flex-direction: column;
}
.match-interest-actions {
flex-wrap: wrap;
}
.match-interest-actions .btn,
.match-interest-actions form {
width: 100%;
}
.match-interest-actions form .btn {
width: 100%;
}
}
/* =====================================================
FOOTER
===================================================== */
.site-footer {
position: relative;
min-height: 64px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
background: #6d1522;
color: #ffffff;
}
/* LEFT: SOCIAL ICONS */
.footer-social {
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 10px;
}
.footer-social-icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.12);
color: #f6c85f;
transition: 0.2s ease;
}
.footer-social-icon svg {
width: 17px;
height: 17px;
fill: currentColor;
}
.footer-social-icon svg circle,
.footer-social-icon svg rect {
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.footer-social-icon .youtube-play {
fill: #6d1522;
}
.footer-social-icon:hover {
background: #f6c85f;
color: #6d1522;
transform: translateY(-2px);
}
/* MIDDLE: COPYRIGHT */
.footer-copyright {
margin: 0;
text-align: center;
font-size: 14px;
color: #ffffff;
}
/* RIGHT: CHARITY NUMBER */
.footer-charity {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: 500;
color: #f6dfb0;
white-space: nowrap;
}
/* MOBILE */
@media (max-width: 800px) {
.site-footer {
flex-direction: column;
gap: 10px;
padding: 16px 20px;
}
.footer-social,
.footer-charity {
position: static;
transform: none;
}
.footer-copyright,
.footer-charity {
text-align: center;
font-size: 12px;
}
}
/* =========================================================
HINDU TEMPLE - FINAL TEMPLE SUNRISE THEME
KEEP THIS AS THE VERY LAST BLOCK IN style.css
========================================================= */
:root {
--ht-maroon-dark: #4c0710;
--ht-maroon: #6d0d1b;
--ht-ruby: #8e1724;
--ht-terracotta: #b74929;
--ht-gold: #d8a83f;
--ht-gold-light: #efd078;
--ht-saffron: #e88b28;
--ht-ivory: #fffaf0;
--ht-cream: #f8edd9;
--ht-champagne: #f3dfbd;
--ht-text: #3f2924;
--ht-muted: #735e56;
}
/* =========================================================
WHOLE PAGE BACKGROUND
========================================================= */
html {
background: #fff8ed !important;
}
body {
color: var(--ht-text) !important;
background:
radial-gradient(
circle at 12% 14%,
rgba(232, 139, 40, 0.17),
transparent 26%
),
radial-gradient(
circle at 88% 20%,
rgba(216, 168, 63, 0.15),
transparent 26%
),
radial-gradient(
circle at 80% 82%,
rgba(142, 23, 36, 0.08),
transparent 28%
),
linear-gradient(
135deg,
#fffaf0 0%,
#f8ead2 48%,
#fff7e8 100%
)
!important;
}
/* =========================================================
MAIN PAGE CONTENT
========================================================= */
.app-page-content {
position: relative;
background:
radial-gradient(
circle at 20% 20%,
rgba(221, 171, 76, 0.10),
transparent 22%
),
radial-gradient(
circle at 82% 76%,
rgba(173, 68, 39, 0.07),
transparent 25%
),
linear-gradient(
180deg,
rgba(255, 250, 240, 0.96) 0%,
rgba(248, 235, 213, 0.95) 55%,
rgba(255, 248, 237, 0.97) 100%
)
!important;
}
/* subtle decorative temple pattern */
.app-page-content::before {
content: "";
position: fixed;
inset: 110px 0 64px 0;
pointer-events: none;
opacity: 0.22;
background-image:
radial-gradient(
circle at 0 100%,
transparent 0 58px,
rgba(216,168,63,.15) 59px 60px,
transparent 61px
),
radial-gradient(
circle at 100% 0,
transparent 0 72px,
rgba(216,168,63,.12) 73px 74px,
transparent 75px
);
background-size:
280px 280px,
360px 360px;
z-index: 0;
}
.app-page-content > * {
position: relative;
z-index: 1;
}
/* =========================================================
HEADER
========================================================= */
.top-header {
background:
linear-gradient(
105deg,
#470711 0%,
#6d0d1b 42%,
#881925 72%,
#a43725 100%
)
!important;
border-bottom:
2px solid var(--ht-gold) !important;
box-shadow:
0 8px 26px rgba(70, 7, 17, 0.25) !important;
}
/* subtle gold dots in header */
.top-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.17;
background-image:
radial-gradient(
circle,
rgba(239,208,120,.65) 0 2px,
transparent 2.5px
);
background-size:
44px 44px;
}
/* top centre ornament */
.top-header::after {
content: "✦";
position: absolute;
left: 50%;
top: -14px;
transform: translateX(-50%);
width: 82px;
height: 44px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 7px;
color: var(--ht-gold-light);
font-size: 24px;
background:
rgba(91, 8, 20, 0.9);
border:
1px solid rgba(239, 208, 120, .35);
border-radius:
0 0 55px 55px;
}
/* =========================================================
BRAND
========================================================= */
.brand-logo-circle {
background:
linear-gradient(
145deg,
#fffdf8,
#f7dfad
)
!important;
border:
2px solid var(--ht-gold-light) !important;
box-shadow:
0 6px 18px rgba(0,0,0,.22) !important;
}
.brand h1 {
color:
#f4d783 !important;
text-shadow:
0 1px 2px rgba(0,0,0,.20);
}
.brand p {
color:
#fff0c8 !important;
}
/* =========================================================
NAVIGATION
========================================================= */
.main-nav a {
color:
#fffaf0 !important;
position: relative;
transition:
color .2s ease,
transform .2s ease;
}
.main-nav a:hover,
.main-nav a.active {
color:
var(--ht-gold-light) !important;
}
.main-nav a:hover {
transform:
translateY(-1px);
}
/* small active underline */
.main-nav a.active::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
bottom: -10px;
height: 2px;
border-radius: 5px;
background:
var(--ht-gold-light);
}
/* =========================================================
LOGIN / USER BUTTON
========================================================= */
.desktop-login-link,
.user-dropbtn {
color:
#fffaf0 !important;
}
.user-dropbtn {
background:
linear-gradient(
135deg,
#a42b39,
#76111f
)
!important;
border:
1px solid rgba(239,208,120,.38) !important;
box-shadow:
0 7px 18px rgba(0,0,0,.22) !important;
}
.user-dropbtn:hover {
background:
linear-gradient(
135deg,
#d8a83f,
#b87720
)
!important;
color:
#4c0710 !important;
}
/* =========================================================
GENERAL CARDS
========================================================= */
.form-box,
.form-section,
.page-heading,
.dashboard-card,
.empty-card,
.info-card,
.content-card,
.profile-preview,
.bvv-profile-card {
background:
linear-gradient(
145deg,
rgba(255,255,255,.97),
rgba(255,247,232,.97)
)
!important;
border:
1px solid rgba(216,168,63,.35) !important;
box-shadow:
0 15px 42px rgba(91,30,22,.09) !important;
}
/* =========================================================
HEADINGS
========================================================= */
.page-heading h2,
.form-box h2,
.form-section h3,
.profile-page-heading h2 {
color:
var(--ht-maroon) !important;
}
/* =========================================================
BUTTONS
========================================================= */
.btn {
background:
linear-gradient(
135deg,
#8e1724,
#65101b
)
!important;
color:
#ffffff !important;
border:
1px solid rgba(216,168,63,.25) !important;
box-shadow:
0 7px 18px rgba(91,10,20,.20) !important;
}
.btn:hover {
background:
linear-gradient(
135deg,
#a9252f,
#79131f
)
!important;
}
.btn-gold {
background:
linear-gradient(
135deg,
#e1b651,
#c48727
)
!important;
color:
#541018 !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background:
linear-gradient(
105deg,
#470711 0%,
#68101c 45%,
#851b22 72%,
#a43b25 100%
)
!important;
border-top:
2px solid var(--ht-gold) !important;
color:
#fff5dd !important;
box-shadow:
0 -6px 20px rgba(70,7,17,.20) !important;
}
/* LEFT SOCIAL ICONS */
.footer-social-icon {
background:
rgba(255,255,255,.10) !important;
color:
var(--ht-gold-light) !important;
border:
1px solid rgba(239,208,120,.20);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.025);
}
.footer-social-icon:hover {
background:
var(--ht-gold-light) !important;
color:
#5b0b16 !important;
}
/* COPYRIGHT */
.footer-copyright {
color:
#fff5df !important;
}
/* CHARITY NUMBER */
.footer-charity {
color:
#f4d783 !important;
font-weight:
600 !important;
}
/* =========================================================
DESKTOP ONLY
========================================================= */
@media (min-width: 901px) {
.app-page-content {
min-height:
calc(100vh - 174px) !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 900px) {
body {
background:
#fff7ea !important;
}
.top-header {
background:
linear-gradient(
105deg,
#4a0711,
#71101c,
#963223
)
!important;
}
.app-page-content {
background:
linear-gradient(
180deg,
#fff9ed 0%,
#f6e7cd 100%
)
!important;
}
.app-page-content::before {
display:
none;
}
.top-header::after {
display:
none;
}
}
/* =========================================================
FINAL HEADER + FOOTER COLOUR OPTION
DEEP TEAL + ANTIQUE GOLD
========================================================= */
:root {
--temple-teal-dark: #063b3d;
--temple-teal: #07575b;
--temple-teal-light: #0b7375;
--temple-gold: #d7a840;
--temple-gold-light: #f0cf76;
--temple-cream: #fff6df;
}
/* =========================================================
HEADER
========================================================= */
.top-header {
background:
linear-gradient(
100deg,
#053638 0%,
#07575b 48%,
#0a6869 72%,
#0d7770 100%
) !important;
border-bottom:
2px solid var(--temple-gold) !important;
box-shadow:
0 7px 24px rgba(0, 60, 62, 0.24) !important;
}
/* HEADER DECORATION */
.top-header::before {
opacity: 0.13 !important;
background-image:
radial-gradient(
circle,
rgba(240,207,118,.60) 0 2px,
transparent 2.5px
) !important;
}
/* TOP CENTRE DECORATION */
.top-header::after {
color:
var(--temple-gold-light) !important;
background:
rgba(5, 54, 56, .88) !important;
border-color:
rgba(240,207,118,.32) !important;
}
/* =========================================================
BRAND
========================================================= */
.brand-logo-circle {
background:
linear-gradient(
145deg,
#fffaf0,
#f3d991
) !important;
border:
2px solid var(--temple-gold-light) !important;
}
.brand h1 {
color:
var(--temple-gold-light) !important;
}
.brand p {
color:
#fff0ca !important;
}
/* =========================================================
NAV
========================================================= */
.main-nav a {
color:
#fff8e8 !important;
}
.main-nav a:hover,
.main-nav a.active {
color:
var(--temple-gold-light) !important;
}
.main-nav a.active::after {
background:
var(--temple-gold-light) !important;
}
/* =========================================================
LOGIN / ACCOUNT
========================================================= */
.user-dropbtn {
background:
linear-gradient(
135deg,
#0b7375,
#07575b
) !important;
border:
1px solid rgba(240,207,118,.35) !important;
}
.user-dropbtn:hover {
background:
linear-gradient(
135deg,
#e1b74e,
#bc8528
) !important;
color:
#063b3d !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background:
linear-gradient(
100deg,
#043336 0%,
#07575b 48%,
#09686a 75%,
#0d7470 100%
) !important;
border-top:
2px solid var(--temple-gold) !important;
color:
#fff7e5 !important;
box-shadow:
0 -6px 20px rgba(0, 57, 59, .20) !important;
}
/* SOCIAL ICONS */
.footer-social-icon {
background:
rgba(255,255,255,.11) !important;
color:
var(--temple-gold-light) !important;
border:
1px solid rgba(240,207,118,.22) !important;
}
.footer-social-icon:hover {
background:
var(--temple-gold-light) !important;
color:
#063b3d !important;
}
/* COPYRIGHT */
.footer-copyright {
color:
#fff7e8 !important;
}
/* CHARITY NUMBER */
.footer-charity {
color:
var(--temple-gold-light) !important;
}
/* =========================================================
HINDU TEMPLE BELGIUM
FINAL CLEAN SOUTH INDIAN TEMPLE THEME
NO CENTRE HEADER IMAGE
KEEP THIS AS THE LAST BLOCK IN style.css
========================================================= */
:root {
--ht-red-deep: #8c2107;
--ht-red: #b12c07;
--ht-orange: #d9540b;
--ht-saffron: #ec8318;
--ht-gold: #e0ae42;
--ht-gold-light: #ffe29a;
--ht-ivory: #fff9ec;
--ht-cream: #f7e7c9;
--ht-brown: #612613;
--ht-text: #4c332b;
}
/* =========================================================
PAGE BACKGROUND
========================================================= */
html {
min-height: 100%;
background: #fff8ea !important;
}
body {
margin: 0 !important;
min-height: 100vh;
color: var(--ht-text) !important;
background:
radial-gradient(
circle at 12% 16%,
rgba(236, 131, 24, 0.10),
transparent 27%
),
radial-gradient(
circle at 88% 78%,
rgba(224, 174, 66, 0.10),
transparent 28%
),
linear-gradient(
180deg,
#fffaf1 0%,
#f8ead1 100%
) !important;
}
/* =========================================================
APP / MAIN CONTENT BACKGROUND
========================================================= */
.app-page-content {
position: relative;
min-height: calc(100vh - 182px);
background:
radial-gradient(
circle at 50% 32%,
rgba(255,255,255,.52),
transparent 42%
),
linear-gradient(
180deg,
rgba(255,250,241,.98) 0%,
rgba(248,234,209,.98) 100%
) !important;
}
.app-page-content::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .11;
background-image:
radial-gradient(
circle at 0 100%,
transparent 0 60px,
rgba(224,174,66,.18) 61px 62px,
transparent 63px
),
radial-gradient(
circle at 100% 0,
transparent 0 78px,
rgba(236,131,24,.14) 79px 80px,
transparent 81px
);
background-size:
300px 300px,
380px 380px;
}
.app-page-content > * {
position: relative;
z-index: 1;
}
/* =========================================================
HEADER
========================================================= */
.top-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99999 !important;
background:
linear-gradient(
105deg,
#b12c07 0%,
#d9540b 42%,
#ec8318 100%
) !important;
border-bottom:
2px solid var(--ht-gold) !important;
box-shadow:
0 6px 20px rgba(120,40,8,.18) !important;
overflow: visible !important;
}
/* subtle gold-dot texture only */
.top-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .10;
background-image:
radial-gradient(
circle,
rgba(255,225,154,.78) 0 2px,
transparent 2.5px
);
background-size: 48px 48px;
}
/* remove any old centre ornament */
.top-header::after {
content: none !important;
display: none !important;
}
/* =========================================================
HEADER LAYOUT
========================================================= */
.header-container {
position: relative !important;
width: 100% !important;
max-width: 1500px !important;
min-height: 110px !important;
margin: 0 auto !important;
padding: 10px 28px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 28px !important;
}
/* =========================================================
LEFT LOGO
========================================================= */
.brand {
position: relative;
z-index: 5;
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
min-width: 0 !important;
text-decoration: none !important;
}
.brand-logo-circle {
width: 84px !important;
height: 84px !important;
min-width: 84px !important;
min-height: 84px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 84px !important;
overflow: hidden !important;
border-radius: 50% !important;
background:
linear-gradient(
145deg,
#fffdf8,
#f5d98f
) !important;
border:
2px solid #f8db8c !important;
box-shadow:
0 5px 15px rgba(75,28,9,.18) !important;
}
.brand-logo-circle img,
.brand img {
display: block !important;
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
object-fit: contain !important;
}
/* no centre logo/title image */
.header-centre-brand,
.header-title-logo {
display: none !important;
}
/* if old brand text exists, hide it in this final header design */
.brand-text {
display: none !important;
}
/* =========================================================
NAVIGATION
========================================================= */
.main-nav {
position: relative;
z-index: 5;
display: flex !important;
align-items: center !important;
margin-left: auto !important;
gap: 28px !important;
white-space: nowrap !important;
}
.main-nav a,
.desktop-login-link {
position: relative;
color: #fff9ec !important;
text-decoration: none !important;
font-size: 15px !important;
font-weight: 700 !important;
transition:
color .2s ease,
transform .2s ease !important;
}
.main-nav a:hover,
.main-nav a.active,
.desktop-login-link:hover,
.desktop-login-link.active {
color: var(--ht-gold-light) !important;
}
.main-nav a:hover,
.desktop-login-link:hover {
transform: translateY(-1px);
}
.main-nav a.active::after,
.desktop-login-link.active::after {
content: "";
position: absolute;
left: 15%;
right: 15%;
bottom: -10px;
height: 2px;
border-radius: 10px;
background: var(--ht-gold-light);
}
/* =========================================================
USER ACCOUNT BUTTON / DROPDOWN
========================================================= */
.user-dropdown {
position: relative;
}
.user-dropbtn {
border: 1px solid rgba(255,226,154,.40) !important;
background:
linear-gradient(
135deg,
#9e2717,
#78180e
) !important;
color: #ffffff !important;
box-shadow:
0 7px 18px rgba(90,26,9,.18) !important;
}
.user-dropbtn:hover {
background:
linear-gradient(
135deg,
#f1c45c,
#d69a27
) !important;
color: #65180c !important;
}
.user-dropdown-content {
background: #fff9ec !important;
border: 1px solid #e8c56f !important;
}
.user-dropdown-content a {
color: #8d2a13 !important;
border-bottom: 1px solid #f0ddb1 !important;
}
.user-dropdown-content a:hover {
background: #fff0ce !important;
color: #c14a0a !important;
}
/* =========================================================
MOBILE HAMBURGER
========================================================= */
.mobile-menu-button span {
background: #fff7e5 !important;
}
/* =========================================================
GENERAL CARDS / PANELS
========================================================= */
.form-box,
.form-section,
.page-heading,
.dashboard-card,
.empty-card,
.info-card,
.profile-preview,
.content-card,
.bvv-profile-card {
background:
linear-gradient(
145deg,
rgba(255,255,255,.98),
rgba(255,247,229,.98)
) !important;
border:
1px solid rgba(221,169,60,.34) !important;
box-shadow:
0 14px 38px rgba(120,58,18,.08) !important;
}
.page-heading h2,
.form-box h2,
.form-section h3,
.profile-page-heading h2 {
color: #982a10 !important;
}
/* =========================================================
BUTTONS
========================================================= */
.btn {
background:
linear-gradient(
135deg,
#c4480b,
#9b2809
) !important;
color: #ffffff !important;
border:
1px solid rgba(221,169,60,.30) !important;
box-shadow:
0 7px 18px rgba(110,42,8,.20) !important;
}
.btn:hover {
background:
linear-gradient(
135deg,
#dd620d,
#ad3509
) !important;
}
.btn-gold {
background:
linear-gradient(
135deg,
#e1b850,
#c48625
) !important;
color: #65180c !important;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 72px !important;
z-index: 99998 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 28px !important;
background:
linear-gradient(
105deg,
#9c2507 0%,
#be3c08 38%,
#d75a0b 70%,
#e47a13 100%
) !important;
border-top:
2px solid #e0ae42 !important;
color: #fff7e5 !important;
box-shadow:
0 -5px 18px rgba(116,37,7,.14) !important;
}
/* social icons on left */
.footer-social {
position: absolute !important;
left: 28px !important;
top: 50% !important;
transform:
translateY(-50%) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.footer-social-icon {
width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background:
rgba(102,30,8,.36) !important;
color:
#ffe19a !important;
border:
1px solid rgba(255,225,154,.20) !important;
transition:
.2s ease !important;
}
.footer-social-icon svg {
width: 17px !important;
height: 17px !important;
fill: currentColor;
}
.footer-social-icon svg rect,
.footer-social-icon svg circle {
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.footer-social-icon .youtube-play {
fill: #8f2208;
}
.footer-social-icon:hover {
background: #ffe19a !important;
color: #8f2208 !important;
transform: translateY(-2px);
}
/* copyright in centre */
.footer-copyright,
.site-footer .footer-copyright {
margin: 0 !important;
color: #fff8ea !important;
font-size: 14px !important;
font-weight: 400 !important;
text-align: center !important;
white-space: nowrap !important;
}
/* charity number on right */
.footer-charity {
position: absolute !important;
right: 28px !important;
top: 50% !important;
transform:
translateY(-50%) !important;
color: #ffe4a8 !important;
font-size: 14px !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
/* =========================================================
DESKTOP SPACING
========================================================= */
@media (min-width: 901px) {
body {
padding-top: 110px !important;
padding-bottom: 72px !important;
}
}
/* =========================================================
SMALLER DESKTOP / TABLET LANDSCAPE
========================================================= */
@media (max-width: 1250px) and (min-width: 901px) {
.header-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.main-nav {
gap: 18px !important;
}
.main-nav a,
.desktop-login-link {
font-size: 14px !important;
}
.footer-charity {
right: 20px !important;
font-size: 13px !important;
}
.footer-social {
left: 20px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 900px) {
html,
body {
width: 100% !important;
}
body {
padding-top: 82px !important;
padding-bottom: 0 !important;
}
.top-header {
height: 82px !important;
background:
linear-gradient(
105deg,
#b12c07,
#d9540b,
#ec8318
) !important;
}
.header-container {
width: 100% !important;
max-width: none !important;
height: 82px !important;
min-height: 82px !important;
padding:
7px 14px !important;
}
.brand-logo-circle {
width: 58px !important;
height: 58px !important;
min-width: 58px !important;
min-height: 58px !important;
flex:
0 0 58px !important;
}
.brand-logo-circle img,
.brand img {
width: 50px !important;
height: 50px !important;
max-width: 50px !important;
max-height: 50px !important;
}
.main-nav {
display: none !important;
}
.main-nav.mobile-open {
display: flex !important;
position: absolute !important;
top: 82px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
padding:
20px 22px !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 17px !important;
background:
linear-gradient(
180deg,
#c94909,
#ed8016
) !important;
border-top:
1px solid rgba(255,225,154,.30) !important;
box-shadow:
0 12px 26px rgba(0,0,0,.16) !important;
z-index:
999999 !important;
}
.app-page-content {
min-height:
calc(100vh - 82px) !important;
background:
linear-gradient(
180deg,
#fff9ed,
#f7e7c9
) !important;
}
.app-page-content::before {
display: none !important;
}
/* Footer becomes stacked on mobile */
.site-footer {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
flex-direction: column !important;
gap: 10px !important;
padding:
16px 20px !important;
}
.footer-social,
.footer-charity {
position: static !important;
transform: none !important;
}
.footer-copyright,
.footer-charity {
white-space: normal !important;
text-align: center !important;
font-size: 12px !important;
}
}
/* =========================================================
LOGO FIX - MATCH HEADER BACKGROUND
========================================================= */
/* brand area */
.brand {
display: flex !important;
align-items: center !important;
gap: 12px !important;
text-decoration: none !important;
flex-shrink: 0 !important;
padding-left: 10px !important;
}
/* if you are using brand-logo-wrap */
.brand-logo-wrap {
width: 78px !important;
height: 78px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
padding: 0 !important;
overflow: visible !important;
}
/* if old class still exists, override that too */
.brand-logo-circle {
width: 78px !important;
height: 78px !important;
min-width: 78px !important;
min-height: 78px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
overflow: visible !important;
}
/* logo image */
.brand-logo-image,
.brand-logo-circle img,
.brand-logo-wrap img {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
object-fit: contain !important;
display: block !important;
filter: drop-shadow(0 3px 8px rgba(92, 33, 10, 0.18));
}
/* remove any old text if present */
.brand-text {
display: none !important;
}
/* slightly better header spacing */
.header-container {
padding: 10px 26px !important;
}
/* mobile */
@media (max-width: 900px) {
.brand {
padding-left: 0 !important;
}
.brand-logo-wrap,
.brand-logo-circle {
width: 58px !important;
height: 58px !important;
min-width: 58px !important;
min-height: 58px !important;
}
.brand-logo-image,
.brand-logo-circle img,
.brand-logo-wrap img {
width: 52px !important;
height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
}
}
/* TEMPORARY FIX FOR WHITE LOGO BACKGROUND */
.brand-logo-circle,
.brand-logo-wrap {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.brand-logo-circle img,
.brand-logo-wrap img,
.brand-logo-image {
background: transparent !important;
mix-blend-mode: multiply;
width: 76px !important;
height: 76px !important;
object-fit: contain !important;
filter:
drop-shadow(0 3px 5px rgba(90, 30, 5, 0.15));
}
/* =========================================================
HINDU TEMPLE BELGIUM
FINAL HOME PAGE HERO
HEADER / FOOTER ARE NOT CHANGED HERE
========================================================= */
/* =========================================================
MAIN HERO
========================================================= */
.ht-home-hero {
position: relative;
width: 100%;
min-height:
calc(100vh - 180px);
overflow: hidden;
display: flex;
align-items: center;
color: #503a30;
background:
radial-gradient(
circle at 76% 52%,
rgba(231, 183, 87, .30),
transparent 30%
),
radial-gradient(
circle at 20% 25%,
rgba(255, 255, 255, .75),
transparent 35%
),
linear-gradient(
105deg,
#fffaf0 0%,
#fff4dc 52%,
#f8dfac 100%
);
}
/* subtle paper texture */
.ht-home-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .09;
background-image:
radial-gradient(
circle,
#b87b31 0 1px,
transparent 1.4px
);
background-size:
11px 11px;
}
/* LEFT DECORATIVE MANDALA */
.ht-home-hero::after {
content: "✺";
position: absolute;
left: -80px;
bottom: -110px;
color:
rgba(190, 126, 38, .10);
font-size:
390px;
line-height: 1;
pointer-events: none;
}
/* =========================================================
LAYOUT
========================================================= */
.ht-home-inner {
position: relative;
z-index: 3;
width: 100%;
max-width: 1450px;
margin:
0 auto;
padding:
55px 7% 75px;
display: grid;
grid-template-columns:
1.05fr .95fr;
align-items: center;
gap: 45px;
}
/* =========================================================
TEXT AREA
========================================================= */
.ht-home-copy {
max-width: 700px;
text-align: center;
margin:
0 auto;
}
/* ornament above welcome */
.home-top-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 12px;
}
.home-top-ornament span {
width: 105px;
height: 1px;
background:
#b97d2b;
}
.ornament-lotus {
color:
#b57824;
font-size:
18px;
}
/* welcome */
.home-welcome {
margin-bottom:
8px;
color:
#976522;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
17px;
font-weight:
600;
letter-spacing:
.30em;
}
/* title */
.ht-home-copy h1 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-weight:
700;
line-height:
.93;
}
.home-title-red {
display: block;
color:
#7a0913;
font-size:
clamp(58px, 6vw, 92px);
}
.home-title-gold {
display: block;
color:
#a66b18;
font-size:
clamp(60px, 6.2vw, 96px);
}
/* faith culture community */
.home-values {
margin-top:
28px;
color:
#875a23;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
13px;
font-weight:
700;
letter-spacing:
.22em;
}
.home-values b {
margin:
0 9px;
color:
#b6823c;
}
/* divider */
.home-divider {
margin:
29px auto 18px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.home-divider span {
width:
130px;
height:
1px;
background:
linear-gradient(
90deg,
transparent,
#bd8531
);
}
.home-divider span:last-child {
background:
linear-gradient(
90deg,
#bd8531,
transparent
);
}
.home-divider strong {
color:
#b67621;
font-size:
14px;
}
/* description */
.home-description {
max-width:
620px;
margin:
0 auto;
color:
#66544c;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
18px;
line-height:
1.55;
}
/* =========================================================
BUTTONS
========================================================= */
.home-actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin-top:
34px;
}
.home-button {
min-width:
205px;
height:
56px;
padding:
0 26px;
display: inline-flex;
align-items: center;
justify-content: center;
gap:
18px;
border-radius:
7px;
text-decoration:
none;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
17px;
font-weight:
700;
transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease;
}
.home-button span {
font-family:
Arial,
sans-serif;
font-size:
26px;
font-weight:
400;
}
.home-button-primary {
color:
#fff8e8;
background:
linear-gradient(
135deg,
#8c0b16,
#670610
);
border:
1px solid #b87724;
box-shadow:
0 8px 19px
rgba(100, 22, 13, .15);
}
.home-button-primary:hover {
transform:
translateY(-2px);
background:
linear-gradient(
135deg,
#9e1420,
#770813
);
}
.home-button-secondary {
color:
#702719;
background:
rgba(255, 250, 238, .62);
border:
1px solid #ba7e2c;
}
.home-button-secondary:hover {
transform:
translateY(-2px);
background:
#fffaf0;
}
/* =========================================================
RIGHT TEMPLE ART
========================================================= */
.home-temple-art {
position: relative;
min-height:
585px;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* golden sunlight */
.sun-glow {
position: absolute;
right:
2%;
bottom:
70px;
width:
360px;
height:
360px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(255,234,152,.85) 0%,
rgba(236,179,64,.25) 42%,
transparent 70%
);
filter:
blur(4px);
}
/* CSS TEMPLE PLACEHOLDER */
.temple-silhouette {
position: relative;
z-index: 2;
width:
380px;
display: flex;
flex-direction: column;
align-items: center;
filter:
drop-shadow(
0 18px 20px
rgba(130,80,27,.12)
);
}
.temple-top {
color:
#c58b3a;
font-size:
27px;
line-height:
1;
}
.temple-level {
margin-top:
-1px;
border:
2px solid
rgba(179, 127, 54, .40);
background:
linear-gradient(
180deg,
rgba(246,225,183,.95),
rgba(216,176,110,.88)
);
box-shadow:
inset 0 -8px 0
rgba(163,108,43,.06);
}
.temple-level-1 {
width: 95px;
height: 58px;
}
.temple-level-2 {
width: 145px;
height: 68px;
}
.temple-level-3 {
width: 205px;
height: 78px;
}
.temple-level-4 {
width: 275px;
height: 88px;
}
.temple-level-5 {
width: 350px;
height: 105px;
}
.temple-door {
position: absolute;
bottom: 0;
width:
45px;
height:
65px;
background:
rgba(120,80,40,.32);
border-radius:
23px 23px 0 0;
}
/* =========================================================
HANGING LAMPS
========================================================= */
.home-lamp {
position: absolute;
top: 0;
z-index: 7;
width: 60px;
height: 180px;
pointer-events: none;
}
.home-lamp-left {
left:
45px;
}
.home-lamp-right {
right:
45px;
}
.home-lamp-chain {
position: absolute;
left: 50%;
top: 0;
width:
2px;
height:
108px;
transform:
translateX(-50%);
background:
linear-gradient(
#916019,
#d4a453
);
}
.home-lamp-bowl {
position: absolute;
left: 50%;
bottom:
24px;
width:
58px;
height:
18px;
transform:
translateX(-50%);
border-radius:
5px 5px 30px 30px;
background:
linear-gradient(
180deg,
#f1ca72,
#a86218
);
box-shadow:
0 5px 9px
rgba(91,49,9,.19);
}
.home-lamp-flame {
position: absolute;
left: 50%;
bottom:
41px;
width:
12px;
height:
20px;
transform:
translateX(-50%)
rotate(45deg);
border-radius:
70% 0 70% 70%;
background:
linear-gradient(
135deg,
#fff5aa,
#e89018
);
box-shadow:
0 0 17px
rgba(235,159,42,.60);
}
/* =========================================================
BOTTOM DECORATION
========================================================= */
.home-bottom-pattern {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height:
12px;
border-top:
1px solid rgba(170,100,25,.28);
border-bottom:
3px solid rgba(123,36,17,.55);
background:
repeating-linear-gradient(
90deg,
transparent 0 10px,
rgba(180,112,26,.16) 10px 12px,
transparent 12px 22px
);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.ht-home-inner {
grid-template-columns:
1fr;
gap:
25px;
}
.home-temple-art {
min-height:
400px;
}
.temple-silhouette {
transform:
scale(.78);
transform-origin:
bottom center;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.ht-home-inner {
padding:
50px 20px 70px;
}
.home-title-red,
.home-title-gold {
font-size:
46px;
}
.home-welcome {
font-size:
12px;
letter-spacing:
.20em;
}
.home-values {
font-size:
10px;
line-height:
2;
letter-spacing:
.13em;
}
.home-description {
font-size:
16px;
}
.home-actions {
flex-direction:
column;
}
.home-button {
width:
100%;
}
.home-lamp {
display:
none;
}
.home-temple-art {
min-height:
310px;
}
.temple-silhouette {
transform:
scale(.62);
transform-origin:
bottom center;
}
}