:root{
--kgc-hero:url("/dsl_golf_portal_management/static/src/img/kgc_hero_clubsite.jpg");
--kgc-hero-sub:url("/dsl_golf_portal_management/static/src/img/kgc_hero.jpg");
--gf-primary-300:#38684F;
--gf-primary-400:#2A5240;
--gf-primary-500:#1E3B2C;
--gf-primary-600:#12261D;
--gf-primary-700:#0C1A13;
--gf-primary-050:#E9EEE6;
--gf-primary-100:#F2F5EE;
--gf-paper:#FCFAF5;
--gf-brass:#A9822F;
--gf-brass-light:#C9A75B;
--gf-brass-text:#E9C26A;
--gf-surface:#F6F3EC;
--gf-ink:#242320;
--gf-text:#494840;
--gf-muted:#494840;
--gf-muted-2:#5B5A54;
--gf-border:#DAD3C1;
--gf-border-strong:#C3B99F;
--gf-accent:#624B0E;
--gf-accent-bg:#F7EFDA;
--gf-success:#1C5636;
--gf-success-bg:#E6EFE6;
--gf-warning:#6B4808;
--gf-warning-bg:#F8EFDC;
--gf-danger:#94201F;
--gf-danger-bg:#F8E9E6;
--gf-info:#144E6B;
--gf-info-bg:#E7EEF2;
--gf-shadow-rgb:18,38,29;
--kgc-hero-height:clamp(340px, 24vw, 360px);
}
@media (max-width: 1200px){:root{--kgc-hero-height:clamp(320px, 28vw, 350px)}}
@media (max-width: 960px){:root{--kgc-hero-height:clamp(280px, 34vw, 320px)}}
@media (max-width: 640px){:root{--kgc-hero-height:clamp(220px, 52vw, 260px)}}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;font-size:16px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html[data-size="l"]{font-size:18px}
html[data-size="xl"]{font-size:20px}
body, button, input, optgroup, select, textarea, h1, h2, h3, h4, h5, h6{
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body{
font-size:1rem;line-height:1.55;color:var(--gf-ink, #242320);background:var(--gf-surface, #F6F3EC);overflow-x:hidden;
-webkit-font-smoothing:antialiased;position:relative}
a{color:inherit;text-decoration:none}
svg{display:block;flex:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
:focus-visible{outline:3px solid var(--gf-accent, #624B0E);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- top ---------- */
.hdr{position:relative;z-index:3;color:var(--gf-paper, #FCFAF5);background:linear-gradient(180deg,var(--gf-primary-500, #1E3B2C) 0%,var(--gf-primary-600, #12261D) 46%,var(--gf-primary-700, #0C1A13) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.42),0 6px 18px rgba(0,0,0,.20)}.top{background:none;color:var(--gf-paper, #FCFAF5);position:relative;z-index:1}.top:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(180deg,rgba(0,0,0,.30) 0 1px,rgba(201,167,91,.45) 1px 2px)}
.topin{max-width:1120px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px;
flex-wrap:wrap}
.brand .logo{width:52px;height:52px;flex:none;border-radius:50%;filter:drop-shadow(0 1px 3px rgba(0,0,0,.38))}html[data-size="l"] .brand .logo{width:60px;height:60px}html[data-size="xl"] .brand .logo{width:68px;height:68px}.pav{overflow:hidden;box-shadow:0 0 0 3px rgba(201,167,91,.92),0 2px 7px rgba(0,0,0,.28)}.pav img{width:100%;height:100%;object-fit:cover;display:block}.brand{display:flex;align-items:center;gap:20px}html[data-size="l"] .pav{width:66px;height:66px}html[data-size="xl"] .pav{width:74px;height:74px}
.brand b{display:block;font-size:1.15rem;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.24);font-weight:700;line-height:1.25}
.brand .sub{display:block;font-size:.76rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gf-brass-text, #E9C26A);opacity:1;margin-top:2px}
.tsize{margin-left:auto;display:flex;align-items:center;gap:8px}
.tsize>span{font-size:.9rem;opacity:.88;letter-spacing:.3px}
.tsize .grp{display:flex;border:2px solid rgba(201,167,91,.55);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.18);box-shadow:inset 0 2px 4px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.16)}
.tsize button{background:transparent;color:var(--gf-paper, #FCFAF5);border:0;cursor:pointer;font-family:inherit;
font-weight:700;padding:8px 15px;min-height:48px;border-left:2px solid rgba(201,167,91,.40)}
.tsize button:first-child{border-left:0}
.tsize button[aria-pressed="true"]{background:var(--gf-paper, #FCFAF5);color:var(--gf-primary-500, #1E3B2C)}
.tsize .a1{font-size:.9rem} .tsize .a2{font-size:1rem} .tsize .a3{font-size:1.2rem}
/* ---------- greeting ---------- */
.hero{background:none;color:var(--gf-paper, #FCFAF5);padding:30px 0 34px;position:relative;z-index:1}
.hero h1{font-size:1.9rem;font-weight:700;line-height:1.22;text-shadow:0 1px 3px rgba(0,0,0,.26)}
.hero p{font-size:1rem;opacity:.94;margin-top:8px}
.hero .who{display:flex;align-items:center;gap:16px}
.pav{width:74px;height:74px;border-radius:50%;background:var(--gf-paper, #FCFAF5);color:var(--gf-primary-500, #1E3B2C);font-size:1.35rem;
font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
/* ---------- blocks ---------- */
main{padding:18px 0 32px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:stretch}
.cols>div:first-child{display:flex;flex-direction:column}
.cols>div:first-child>.block:last-child{margin-bottom:0}
.cols>aside{display:flex;flex-direction:column;height:100%}
.cols>aside>.block{flex:1 1 auto;display:flex;flex-direction:column;margin-bottom:0;height:100%}
.cols>aside>.block>.help{flex:1 1 auto;display:flex;flex-direction:column;box-sizing:border-box;height:100%}
/* when a member turns the text up, two columns stop helping — fall back to one */
html[data-size="xl"] .cols{grid-template-columns:1fr}
.block{margin-bottom:20px}
h2{font-size:1.16rem;font-weight:700;margin-bottom:8px;line-height:1.3}
h2 .hint{display:block;font-size:.85rem;font-weight:400;}h2.tight{margin-bottom:4px}p.hint{margin:0 0 10px;color:var(--gf-muted, #494840);margin-top:3px}
.card{background:var(--gf-paper, #FCFAF5);border:1.5px solid var(--gf-border, #DAD3C1);border-radius:12px}
/* next game */
.next{border-color:var(--gf-border-strong, #C3B99F);padding:16px 18px}
.nxtop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.date{border:1.5px solid var(--gf-primary-400, #2A5240);border-radius:10px;overflow:hidden;text-align:center;
min-width:5.4rem;flex:none}
.date b{display:block;background:linear-gradient(180deg,var(--gf-paper, #FCFAF5) 0%,var(--gf-primary-050, #E9EEE6) 100%);color:var(--gf-primary-600, #12261D);font-size:.78rem;padding:5px 8px;border-bottom:1.5px solid var(--gf-primary-400, #2A5240);
letter-spacing:.5px;white-space:nowrap}
.date span{display:block;font-size:1.6rem;font-weight:700;padding:4px 0 1px;line-height:1.1}
.date i{display:block;font-style:normal;font-size:.82rem;padding-bottom:5px;color:var(--gf-text, #494840)}
.nxb{flex:1 1 17rem;min-width:0}
.nxb b{display:block;font-size:1.22rem;font-weight:700;line-height:1.25}
.nxb span{display:block;font-size:.9rem;color:var(--gf-text, #494840);margin-top:4px}
.nxbtns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.nxbtns .btn{flex:0 1 auto;min-width:140px;min-height:38px;padding:7px 16px;font-size:.88rem}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 18px;
border-radius:8px;font-size:.92rem;font-weight:600;font-family:inherit;cursor:pointer;
border:1.5px solid var(--gf-primary-400, #2A5240);background:var(--gf-primary-400, #2A5240);color:var(--gf-paper, #FCFAF5);text-align:center;transition:.12s;white-space:nowrap;line-height:1.2}
.btn:hover{background:var(--gf-primary-500, #1E3B2C);border-color:var(--gf-primary-500, #1E3B2C)}
.btn.o{background:linear-gradient(180deg,var(--gf-primary-500, #1E3B2C) 0%,var(--gf-primary-600, #12261D) 100%);border-color:var(--gf-primary-600, #12261D);color:var(--gf-paper, #FCFAF5);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 4px rgba(0,0,0,.15)}
.btn.o:hover{background:var(--gf-primary-600, #12261D);border-color:var(--gf-primary-600, #12261D)}
.btn.g{background:var(--gf-paper, #FCFAF5);color:var(--gf-ink, #242320);border-color:var(--gf-border-strong, #C3B99F)}
.btn.g:hover{background:var(--gf-primary-100, #F2F5EE);border-color:var(--gf-primary-400, #2A5240)}
/* do-list */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px;grid-auto-rows:1fr}.dos .do:last-child:nth-child(odd){grid-column:1/-1}
html[data-size="xl"] .dos{grid-template-columns:1fr}
.do{display:flex;align-items:center;gap:13px;padding:17px 16px;background:var(--gf-paper, #FCFAF5);
border:2px solid var(--gf-border, #DAD3C1);border-radius:14px;min-height:112px;height:100%;transition:.12s}
.do:hover{border-color:var(--gf-primary-400, #2A5240);background:var(--gf-primary-100, #F2F5EE)}
.do i.bx{width:48px;height:48px;border-radius:12px;color:var(--gf-paper, #FCFAF5);background:linear-gradient(180deg,var(--gf-primary-300, #38684F) 0%,var(--gf-primary-300, #38684F) 62%,var(--gf-primary-400, #2A5240) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.20),0 2px 5px rgba(0,0,0,.20);
display:flex;align-items:center;justify-content:center;flex:none}
.do .db2{flex:1;min-width:0}
.do b{display:block;font-size:1.08rem;font-weight:700;line-height:1.3}
.do span{display:block;font-size:.94rem;color:var(--gf-muted, #494840);margin-top:3px}
.do .ar{margin-left:auto;color:var(--gf-primary-500, #1E3B2C);flex:none}
/* account rows */
.rows{overflow:hidden}
.row{display:flex;align-items:center;gap:16px;padding:18px 20px;border-top:2px solid var(--gf-border, #DAD3C1);
min-height:88px;transition:.12s}
.row:first-child{border-top:0}
.row:hover{background:var(--gf-primary-100, #F2F5EE)}
.row i.bx{width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,var(--gf-paper, #FCFAF5) 0%,var(--gf-primary-050, #E9EEE6) 62%,var(--gf-primary-050, #E9EEE6) 100%);color:var(--gf-primary-600, #12261D);border:2px solid var(--gf-primary-300, #38684F);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(0,0,0,.13);
display:flex;align-items:center;justify-content:center;flex:none}
.row i.bx.q{background:var(--gf-primary-050, #E9EEE6);color:var(--gf-primary-600, #12261D)}
.rb{flex:1;min-width:0}
.rb b{display:block;font-size:1.14rem;font-weight:700;line-height:1.3}
.rb .m{display:block;font-size:1rem;color:var(--gf-ink, #242320);margin-top:3px;font-weight:600}
.rb .m.q{font-weight:400;color:var(--gf-muted, #494840)}
.rb .s{display:block;font-size:.94rem;color:var(--gf-muted, #494840);margin-top:2px}
.row .ar{color:var(--gf-primary-500, #1E3B2C);flex:none}
/* details */
.det{padding:16px 18px}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;padding-bottom:12px;border-bottom:1px solid var(--gf-border, #DAD3C1)}
@media (max-width:560px){.det-grid{grid-template-columns:1fr;gap:8px}}
.dl{display:block;padding:4px 0;border-bottom:0;font-size:.92rem}
.dl span{display:block;color:var(--gf-muted, #494840);font-size:.8rem;letter-spacing:.3px;text-transform:uppercase;font-weight:600}
.dl b{display:block;font-weight:700;margin-top:2px;font-size:1rem;color:var(--gf-ink, #242320)}
.dl.key b{color:var(--gf-primary-600, #12261D);font-size:1.05rem}
.detbtns{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.detbtns .btn{min-height:38px;padding:7px 16px;font-size:.88rem}
/* help */
.help{background:var(--gf-primary-050, #E9EEE6);border:1.5px solid var(--gf-primary-400, #2A5240);border-radius:12px;padding:16px 16px;
text-align:center}
.help h2{margin-bottom:4px;font-size:1.12rem}
.help p{font-size:.88rem;color:var(--gf-text, #494840);margin-bottom:12px}
.tel{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.08rem;font-weight:700;
color:var(--gf-primary-500, #1E3B2C);min-height:42px;border:1.5px solid var(--gf-primary-400, #2A5240);border-radius:8px;background:var(--gf-paper, #FCFAF5);
padding:6px 14px}
.tel:hover{background:var(--gf-primary-050, #E9EEE6)}
.helpnote{font-size:.82rem;color:var(--gf-muted, #494840);margin-top:8px}
/* caption under a detail value */
.dl i{display:block;font-style:normal;font-size:.8rem;line-height:1.4;
color:var(--gf-muted, #494840);margin-top:2px;font-weight:400;letter-spacing:0}
.dl.key i{font-size:.8rem;color:var(--gf-muted, #494840)}
/* department telephone list in the help card */
.depts{margin-top:12px;border-top:1px solid var(--gf-border, #DAD3C1)}
.dept{display:block;padding:8px 2px;min-height:36px;
border-bottom:1px solid var(--gf-border, #DAD3C1);text-align:left}
.dept:last-child{border-bottom:0}
.dept:hover,.dept:focus-visible{background:var(--gf-primary-050, #E9EEE6)}
.dept .dn{display:block;font-size:.88rem;font-weight:700;color:var(--gf-ink, #242320)}
.dept .dw{display:block;font-size:.8rem;line-height:1.4;color:var(--gf-muted, #494840);margin-top:1px}
.dept .dp{display:block;font-size:.96rem;font-weight:700;
color:var(--gf-primary-500, #1E3B2C);margin-top:3px;letter-spacing:.2px}
.dept .dp .no-phone{font-size:.84rem;font-weight:500;font-style:italic;color:var(--gf-muted, #494840);letter-spacing:0}
.help-action{margin-top:auto;padding-top:14px}
/* footer */
footer{border-top:1px solid var(--gf-border, #DAD3C1);background:var(--gf-paper, #FCFAF5);padding:16px 0 20px}
.fl{display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center;font-size:.88rem}
.fl a{color:var(--gf-primary-500, #1E3B2C);font-weight:600;min-height:32px;display:inline-flex;align-items:center;padding:5px 14px;border-radius:8px;border:1px solid var(--gf-border, #DAD3C1);background:#FFF;text-decoration:none}
.fl a:hover{text-decoration:none;background:var(--gf-primary-500, #1E3B2C);color:#FFF}
.fnote{font-size:.84rem;color:var(--gf-muted, #494840);margin-top:10px;line-height:1.5}
/* notes drawer */
.scrim{position:fixed;inset:0;background:rgba(var(--gf-shadow-rgb, 18,38,29),.4);opacity:0;pointer-events:none;
transition:.2s;z-index:80}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:560px;max-width:94vw;background:var(--gf-paper, #FCFAF5);z-index:90;
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s;
display:flex;flex-direction:column;box-shadow:-14px 0 40px -18px rgba(var(--gf-shadow-rgb, 18,38,29),.5)}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto}
.dh{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:2px solid var(--gf-border, #DAD3C1);
background:var(--gf-primary-100, #F2F5EE)}
.dh h3{font-size:1.1rem;font-weight:700}
.dh button{margin-left:auto;background:transparent;border:0;font-size:1.7rem;line-height:1;cursor:pointer;
color:var(--gf-muted, #494840);font-family:inherit;min-width:44px;min-height:44px}
.db{overflow:auto;padding:4px 22px 30px}
.note{padding:17px 0;border-bottom:2px solid var(--gf-border, #DAD3C1)}
.note:last-child{border-bottom:0}
.note>b:first-child{display:block;font-size:1rem;font-weight:700;color:var(--gf-primary-500, #1E3B2C);margin-bottom:6px}
.note p{font-size:.95rem;line-height:1.7;color:var(--gf-text, #494840)}
@media (max-width:960px){
.cols{grid-template-columns:1fr}
.cols>div:first-child>.block:last-child{margin-bottom:20px}
.cols>aside{height:auto}
.cols>aside>.block{height:auto;margin-bottom:26px}
.cols>aside>.block>.help{height:auto}
}
@media (max-width:720px){ .dos{grid-template-columns:1fr} }
@media (max-width:620px){
.topin{padding:16px 16px}
.brand .sub{display:none}
.tsize{width:100%;margin-left:0;justify-content:space-between}
.hero h1{font-size:1.45rem}
.nxbtns .btn{min-width:100%}
.dl b{text-align:left}.dl.key b{font-size:1.2rem;letter-spacing:.7px;color:var(--gf-primary-600, #12261D)}
}
/* KGC-PREMIUM-LAYER-START */
/* ============================================================================
PREMIUM LAYER — Kurmitola Golf Club member portal
Appended after the base stylesheet, so it overrides by order alone and the
original rules stay untouched and readable underneath.
What it changes: surface quality, not information. Deeper club green, a real
brass scale used as hairline and edge rather than as fill, an ivory page with
a warm gradient, one display serif for headings against Inter for everything
read at length, layered shadow instead of heavy 2px outlines, and 16/12px
radii held consistently.
What it does not change: any text colour, any control height, any tap target,
any font size. The AAA contrast measured on the original pack is preserved —
tints are only ever lightened, inks are never lifted.
========================================================================== */
:root{
/* club green, deepened */
--gf-primary-300:#3A6B51;
--gf-primary-400:#275140;
--gf-primary-500:#17372A;
--gf-primary-600:#0E241B;
--gf-primary-700:#071510;
--gf-primary-050:#EAF0EA;
--gf-primary-100:#F3F6F0;
/* paper and canvas */
--gf-paper:#FDFCF8;
--gf-surface:#F4F1E7;
/* brass — edge and hairline, never a fill behind text */
--gf-brass:#A9822F;
--gf-brass-light:#D4B571;
--gf-brass-text:#EBCB86;
--gf-brass-hair:rgba(169,130,47,.34);
--gf-brass-hair-soft:rgba(169,130,47,.18);
--gf-border:#E3DDCC;
--gf-border-strong:#CFC4A7;
--gf-shadow-rgb:23,55,42;
/* elevation */
--gf-e1:0 1px 2px rgba(23,55,42,.05), 0 1px 1px rgba(23,55,42,.04);
--gf-e2:0 1px 2px rgba(23,55,42,.05), 0 10px 26px -16px rgba(23,55,42,.34);
--gf-e3:0 2px 4px rgba(23,55,42,.06), 0 18px 40px -20px rgba(23,55,42,.40);
--gf-r-lg:16px;
--gf-r-md:12px;
--gf-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--gf-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--gf-serif:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* ---------- page ---------- */
body{
background:#F1EDE1;
background-image:
radial-gradient(1100px 420px at 50% -160px, rgba(169,130,47,.08), rgba(169,130,47,0) 72%),
linear-gradient(180deg,#F8F5ED 0%, var(--gf-surface) 320px, var(--gf-surface) 100%);
background-repeat:no-repeat;
background-size:100% 100%, 100% 100%;
}
/* ---------- masthead ---------- */
.hdr{
background:
radial-gradient(760px 220px at 22% -40px, rgba(255,255,255,.10), transparent 68%),
linear-gradient(180deg,var(--gf-primary-500) 0%,var(--gf-primary-600) 52%,var(--gf-primary-700) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 -1px 0 rgba(0,0,0,.5),
0 10px 34px -14px rgba(7,21,16,.60);
}
/* one brass hairline under the club bar, one under the whole masthead */
.top:after{
height:1px;
background:linear-gradient(90deg,
rgba(169,130,47,0) 0%, var(--gf-brass-hair) 12%,
rgba(212,181,113,.55) 50%, var(--gf-brass-hair) 88%, rgba(169,130,47,0) 100%);
}
.hdr:after{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
background:linear-gradient(90deg,#8C6A22 0%, var(--gf-brass) 26%, var(--gf-brass-light) 50%, var(--gf-brass) 74%, #8C6A22 100%);
box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.brand b{
font-family:var(--gf-serif);font-weight:600;letter-spacing:.1px;
font-size:1.48rem;text-shadow:0 1px 3px rgba(0,0,0,.34);
}
.brand .sub{letter-spacing:2.4px;font-size:.82rem;color:var(--gf-brass-text);opacity:.96}
.brand .logo,.pav{box-shadow:0 0 0 2px rgba(212,181,113,.75), 0 4px 12px rgba(0,0,0,.34)}
.pav{overflow:hidden}
/* text-size control */
.tsize .grp{
border:1px solid rgba(212,181,113,.50);border-radius:var(--gf-r-md);
background:rgba(0,0,0,.24);
box-shadow:inset 0 2px 5px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.10);
}
.tsize button{border-left:1px solid rgba(212,181,113,.32)}
.tsize button[aria-pressed="true"]{
background:linear-gradient(180deg,#FFFDF6 0%, var(--gf-paper) 100%);
color:var(--gf-primary-600);box-shadow:0 1px 4px rgba(0,0,0,.30)
}
/* ---------- hero ---------- */
.hero h1{font-family:var(--gf-serif);font-weight:600;letter-spacing:-.2px;text-shadow:0 2px 6px rgba(0,0,0,.28)}
.hero .back{letter-spacing:.2px}
.hme{border:1px solid rgba(212,181,113,.42);background:rgba(0,0,0,.24);box-shadow:inset 0 1px 3px rgba(0,0,0,.28)}
.hme img{box-shadow:0 0 0 2px rgba(212,181,113,.80)}
/* ---------- headings ---------- */
h2{font-family:var(--gf-serif);font-weight:600;letter-spacing:-.1px;font-size:1.34rem}
h2 .hint,p.hint{font-family:inherit}
h2 .hint{font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif}
/* ---------- cards ---------- */
.card,.do,.slot,.day,.steps li,.f select,.f input,.f textarea{
border-width:1px;
}
.card{
background:linear-gradient(180deg,#FFFEFA 0%, var(--gf-paper) 100%);
border:1px solid var(--gf-border);border-radius:var(--gf-r-lg);
box-shadow:var(--gf-e2);
}
.card.next{
padding:0 !important;
overflow:hidden;
position:relative;
background:linear-gradient(180deg, #FFFFFF 0%, #FAF8F2 100%);
border:1.5px solid var(--gf-border-strong, #C3B99F);
border-radius:12px;
box-shadow:0 2px 10px rgba(18, 38, 29, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
transition:box-shadow .15s ease, border-color .15s ease;
}
.card.next:hover{
box-shadow:0 4px 16px rgba(18, 38, 29, 0.10);
}
.card.next:before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--gf-brass, #A9822F) 0%, var(--gf-brass-light, #D4B571) 50%, var(--gf-brass, #A9822F) 100%);
z-index:2;
}
/* Slim Card Header */
.nx-head{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:8px 16px;
background:linear-gradient(90deg, rgba(42, 82, 64, 0.05) 0%, rgba(201, 168, 86, 0.07) 100%);
border-bottom:1px solid var(--gf-border, #E3DDCC);
min-height:36px;box-sizing:border-box;
}
.nx-head-left{
display:inline-flex;align-items:center;gap:8px;min-width:0;
}
.nx-indicator-dot{
width:7px;height:7px;border-radius:50%;background:#2E7D32;
box-shadow:0 0 0 2px rgba(46, 125, 50, 0.25);flex-shrink:0;
animation:kgcPulse 2.2s infinite ease-in-out;
}
.nx-head-title{
margin:0;font-size:0.96rem;font-weight:700;color:var(--gf-primary-700, #0C1A13);
font-family:var(--gf-font, Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);letter-spacing:-.1px;line-height:1.2;
white-space:nowrap;
}
.nx-badge-upcoming{
display:inline-flex;align-items:center;padding:1px 7px;font-size:.68rem;font-weight:700;
text-transform:uppercase;letter-spacing:.5px;color:#1B5E20;background:#E8F5E9;
border:1px solid #C8E6C9;border-radius:12px;white-space:nowrap;
}
.nx-head-right{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
}
.nx-ref-code{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight:700;color:var(--gf-primary-700, #0C1A13);background:#FFFDF8;
border:1px solid var(--gf-border-strong, #C3B99F);padding:1px 7px;border-radius:5px;
font-size:.78rem;letter-spacing:.2px;
}
/* Compact Card Body */
.nx-body{
padding:12px 16px 14px;
display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.nxtop.nx-main{
display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0;
}
/* Slim Date Tile */
.nxtop.nx-main .date{
border:1px solid var(--gf-brass-hair, rgba(169, 130, 47, 0.4));
border-radius:8px;box-shadow:0 1px 4px rgba(18, 38, 29, 0.06);
overflow:hidden;text-align:center;
width:52px;min-width:52px;max-width:52px;flex:none;background:#FFFFFF;
}
.nxtop.nx-main .date b{
background:linear-gradient(180deg, var(--gf-primary-500, #1E3B2C) 0%, var(--gf-primary-600, #12261D) 100%);
color:var(--gf-brass-text, #EBD5A0);border-bottom:1px solid var(--gf-primary-700, #0C1A13);
letter-spacing:.8px;font-size:.65rem;text-transform:uppercase;padding:3px 2px;display:block;
font-weight:700;line-height:1.2;
}
.nxtop.nx-main .date span{
font-family:var(--gf-font, Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);font-weight:700;font-size:1.32rem;
line-height:1.05;padding:3px 0 1px;display:block;color:var(--gf-ink, #242320);
}
.nxtop.nx-main .date i{
display:block;font-style:normal;font-size:.68rem;padding-bottom:3px;color:var(--gf-text, #494840);
font-weight:600;text-transform:capitalize;
}
/* Booking Info */
.nxtop.nx-main .nxb{
flex:1 1 auto;min-width:0;
}
.nx-time{
display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:4px;
}
.nx-time b{
font-size:1.15rem;font-weight:700;color:var(--gf-primary-700, #0C1A13);
font-family:var(--gf-font, Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);letter-spacing:-.2px;line-height:1.15;
}
.nx-time-sub{
font-size:.82rem;font-weight:500;color:var(--gf-muted, #736F62);
}
.nx-chips{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px;
}
.nx-chip{
display:inline-flex;align-items:center;gap:4px;font-size:.76rem;color:var(--gf-primary-700, #0C1A13);
background:#FAF8F2;border:1px solid var(--gf-border, #E3DDCC);padding:2px 7px;border-radius:5px;
line-height:1.2;
}
.nx-chip svg{color:var(--gf-primary-500, #1E3B2C);flex-shrink:0;}
.nx-policy-note{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;
}
.nx-badge-refund{
display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:8px;
}
.nx-badge-refund.ok{color:#1B5E20;background:#EDF5F0;border:1px solid #C4DEC9;}
.nx-badge-refund.warn{color:#8A4B08;background:#FFF8E7;border:1px solid #F5DCA8;}
.nx-badge-refund.neutral{color:var(--gf-muted, #736F62);background:#F3EFE6;border:1px solid var(--gf-border, #E3DDCC);}
/* Action Buttons */
.nx-body .nxbtns{
display:flex;flex-direction:column;gap:6px;flex:0 0 160px;margin-top:0;
}
.nx-body .nxbtns .btn{
width:100%;min-height:36px;padding:6px 12px;font-size:.82rem;letter-spacing:.1px;border-radius:6px;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
/* Mobile & Tablet Specific Alignment (< 820px) */
@media (max-width: 820px){
.nx-body{
flex-direction:column;align-items:stretch;gap:10px;padding:11px 13px 13px;
}
.nxtop.nx-main{
display:flex !important;flex-direction:row !important;align-items:flex-start !important;
gap:11px;width:100%;
}
.nxtop.nx-main .date{
width:50px !important;min-width:50px !important;max-width:50px !important;flex-shrink:0 !important;
margin-top:1px;
}
.nxtop.nx-main .nxb{
flex:1 1 auto;min-width:0;
}
.nx-time b{font-size:1.10rem;}
.nx-chips{gap:4px;margin-bottom:4px;}
.nx-chip{font-size:.73rem;padding:1px 6px;}
.nx-badge-refund{font-size:.70rem;padding:1px 6px;}
/* Horizontal 50/50 side-by-side action buttons */
.nx-body .nxbtns{
display:flex !important;flex-direction:row !important;gap:8px !important;
width:100% !important;flex:none !important;margin-top:2px !important;
padding-top:10px;border-top:1px dashed var(--gf-border, #E3DDCC);
}
.nx-body .nxbtns .btn{
flex:1 1 0 !important;width:100% !important;min-width:0 !important;
min-height:36px;padding:6px 4px !important;font-size:.78rem !important;
white-space:nowrap;
}
.nx-head{
padding:7px 13px;
}
.nx-head-title{font-size:.90rem;}
.nx-badge-upcoming{font-size:.65rem;padding:1px 5px;}
.nx-ref-code{font-size:.74rem;padding:1px 5px;}
}
/* Very Small Mobile (< 360px) */
@media (max-width: 360px){
.nx-badge-upcoming{display:none;}
.nx-body .nxbtns .btn{font-size:.74rem !important;padding:5px 2px !important;}
.nx-body .nxbtns .btn svg{display:none;}
}
.rows{box-shadow:var(--gf-e2)}
.row{border-top:1px solid var(--gf-border)}
.row:hover,.dept:hover,.dept:focus-visible{background:var(--gf-primary-100)}
/* ---------- buttons ---------- */
.btn{
min-height:40px;padding:8px 18px;font-size:.92rem;
border-radius:8px;letter-spacing:.2px;
border:1px solid var(--gf-primary-600);
background:linear-gradient(180deg,var(--gf-primary-400) 0%,var(--gf-primary-500) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--gf-e2);
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{
background:linear-gradient(180deg,var(--gf-primary-500) 0%,var(--gf-primary-600) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(212,181,113,.34), var(--gf-e3);
transform:translateY(-1px);
}
.btn:active{transform:translateY(0)}
.btn.o{
background:linear-gradient(180deg,var(--gf-primary-500) 0%,var(--gf-primary-700) 100%);
border-color:var(--gf-primary-700);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--gf-e2);
}
.btn.o:hover{background:linear-gradient(180deg,var(--gf-primary-600) 0%,var(--gf-primary-700) 100%)}
.btn.g{
background:linear-gradient(180deg,#FFFEFA 0%, var(--gf-paper) 100%);
border:1px solid var(--gf-border-strong);
box-shadow:var(--gf-e1);
}
.btn.g:hover{
background:linear-gradient(180deg,#FFFDF4 0%,#FBF7EA 100%);
border-color:var(--gf-brass);box-shadow:var(--gf-e2)
}
.nxbtns .btn.g,
.btn.btn-cancel,
button[onclick="openCancelBookingModal()"] {
background: #c22e2e !important;
color: #e9e2e2 !important;
border-color: #a82323 !important;
box-shadow: 0 1px 3px rgba(194, 46, 46, 0.28);
}
.nxbtns .btn.g:hover,
.btn.btn-cancel:hover,
button[onclick="openCancelBookingModal()"]:hover {
background: #a82323 !important;
color: #ffffff !important;
border-color: #8e1c1c !important;
box-shadow: 0 2px 6px rgba(168, 35, 35, 0.35);
transform: translateY(-1px);
}
.nxbtns .btn.g:active,
.btn.btn-cancel:active,
button[onclick="openCancelBookingModal()"]:active {
background: #8e1c1c !important;
color: #ffffff !important;
border-color: #721616 !important;
transform: translateY(0);
}
:focus-visible{outline:2px solid var(--gf-brass);outline-offset:3px;border-radius:6px}
/* ---------- action tiles ---------- */
.do{
background:linear-gradient(180deg,#FFFEFA 0%, var(--gf-paper) 100%);
border:1px solid var(--gf-border);border-radius:var(--gf-r-lg);
box-shadow:var(--gf-e1);
transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.do:hover{
background:linear-gradient(180deg,#FFFEFA 0%, var(--gf-paper) 100%);
border-color:var(--gf-brass);box-shadow:var(--gf-e3);transform:translateY(-2px)
}
.do b{font-weight:700;letter-spacing:-.1px}
.do:hover .ar,.row:hover .ar{color:var(--gf-brass)}
/* icon chips — green face, brass ring */
.do i.bx{
border-radius:var(--gf-r-md);
background:linear-gradient(180deg,var(--gf-primary-400) 0%,var(--gf-primary-600) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 0 0 1px rgba(212,181,113,.40),
0 3px 8px -3px rgba(7,21,16,.5);
}
.row i.bx{
border:1px solid var(--gf-brass-hair);border-radius:var(--gf-r-md);
background:linear-gradient(180deg,#FFFEF8 0%, var(--gf-primary-050) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(23,55,42,.10);
}
/* ---------- details panel ---------- */
.dl{border-bottom:1px solid var(--gf-border)}
.dl span{letter-spacing:.4px;text-transform:uppercase;font-size:.9rem;font-weight:700;color:var(--gf-muted)}
.dl b{font-size:1.04rem;margin-top:4px}
/* ---------- help card ---------- */
.help{
background:linear-gradient(180deg,#F2F6F0 0%, var(--gf-primary-050) 100%);
border:1px solid var(--gf-primary-400);border-radius:var(--gf-r-lg);
box-shadow:var(--gf-e2);position:relative;overflow:hidden
}
.help:before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--gf-brass) 0%, var(--gf-brass-light) 50%, var(--gf-brass) 100%);
}
.tel{
border:1px solid var(--gf-primary-400);border-radius:var(--gf-r-md);
background:linear-gradient(180deg,#FFFEFA 0%, var(--gf-paper) 100%);
box-shadow:var(--gf-e1);font-variant-numeric:tabular-nums
}
.tel:hover{border-color:var(--gf-brass)}
.depts{border-top:1px solid var(--gf-brass-hair-soft)}
.dept{border-bottom:1px solid var(--gf-border)}
.dept .dp{font-variant-numeric:tabular-nums}
/* ---------- pills ---------- */
.pill{border-width:1px;padding:5px 14px;letter-spacing:.1px;box-shadow:0 1px 1px rgba(23,55,42,.05)}
/* ---------- steps ---------- */
.steps li{
background:linear-gradient(180deg,#FFFEFA 0%, var(--gf-paper) 100%);
border:1px solid var(--gf-border);border-right:0
}
.steps li:last-child{border-right:1px solid var(--gf-border)}
.steps li:first-child{border-radius:var(--gf-r-lg) 0 0 var(--gf-r-lg)}
.steps li:last-child{border-radius:0 var(--gf-r-lg) var(--gf-r-lg) 0}
.steps li i{border-width:1px}
.steps li.on{background:linear-gradient(180deg,#F2F6F0 0%,var(--gf-primary-050) 100%);border-color:var(--gf-primary-400)}
.steps li.on i{background:linear-gradient(180deg,var(--gf-primary-400) 0%,var(--gf-primary-600) 100%);border-color:var(--gf-primary-700)}
/* ---------- tables ---------- */
.tw{border-radius:var(--gf-r-lg)}
table.t th{
background:linear-gradient(180deg,#F6F2E6 0%,#F1ECDD 100%);
border-bottom:1px solid var(--gf-brass-hair);
color:#5B4A22;letter-spacing:.8px;font-size:.9rem
}
table.t td{border-bottom:1px solid var(--gf-border)}
table.t tbody tr:hover{background:#FAF7EE}
table.t .n,table.t td.a{font-variant-numeric:tabular-nums}
tr.tot td{background:linear-gradient(180deg,var(--gf-primary-050) 0%,#E3EBE3 100%);border-top:1px solid var(--gf-brass-hair)}
/* the action column was being clipped at 1280 — give the table room and let the
longest description wrap instead of pushing the last column off the edge */
table.t{table-layout:auto}
@media (min-width:861px){
table.t th{padding-left:12px;padding-right:12px}
table.t td{padding-left:12px;padding-right:12px}
table.t th:first-child,table.t td:first-child{padding-left:18px}
table.t th:last-child,table.t td:last-child{padding-right:18px}
}
table.t td:last-child,table.t th:last-child{white-space:nowrap;text-align:right}
/* the header band should follow the card's corner, not sit square inside it */
.card .tw{border-radius:var(--gf-r-lg);overflow:hidden}
/* ---------- slots, days ---------- */
.slot,.day{
background:linear-gradient(180deg,#FFFEFA 0%, var(--gf-paper) 100%);
border:1px solid var(--gf-border);border-radius:var(--gf-r-md);box-shadow:var(--gf-e1)
}
.day{border-radius:var(--gf-r-lg)}
.slot b,.day b{font-family:var(--gf-serif);font-weight:600;font-variant-numeric:tabular-nums}
.slot:hover,.day:hover{border-color:var(--gf-brass);box-shadow:var(--gf-e2)}
.slot.sel,.day.sel{
background:linear-gradient(180deg,var(--gf-primary-500) 0%,var(--gf-primary-700) 100%);
border-color:var(--gf-primary-700);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(212,181,113,.40), var(--gf-e2)
}
.slot.full,.day.off{background:#F2EFE4;border-style:dashed;border-color:var(--gf-border-strong)}
/* ---------- forms ---------- */
.f select,.f input,.f textarea{
border:1px solid var(--gf-border-strong);border-radius:var(--gf-r-md);
background:linear-gradient(180deg,#FFFEFA 0%, var(--gf-paper) 100%);
box-shadow:inset 0 1px 2px rgba(23,55,42,.05)
}
.f select:focus,.f input:focus,.f textarea:focus{
border-color:var(--gf-brass);box-shadow:0 0 0 3px rgba(169,130,47,.22)
}
.f label{letter-spacing:.2px}
/* ---------- money and figures ---------- */
.amt,.sum b,.tot b{font-variant-numeric:tabular-nums}
.big{font-family:var(--gf-serif);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
/* ---------- footer ---------- */
footer {
border-top: 1px solid var(--gf-brass-hair, rgba(169, 130, 47, 0.25));
background: linear-gradient(180deg, var(--gf-paper, #FCFAF5) 0%, #F5F1E6 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
padding: 16px 0 20px;
}
.fl {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 10px;
font-size: 0.88rem;
}
.fl a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 5px 14px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid var(--gf-border, #DAD3C1);
color: var(--gf-primary-500, #1E3B2C);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.15px;
text-decoration: none;
box-shadow: 0 1px 2px rgba(18, 38, 29, 0.04);
transition: all 0.15s ease;
white-space: nowrap;
}
.fl a svg {
flex-shrink: 0;
color: var(--gf-brass, #A9822F);
transition: color 0.15s ease, transform 0.15s ease;
}
.fl a:hover {
background: var(--gf-primary-500, #1E3B2C);
border-color: var(--gf-primary-500, #1E3B2C);
color: #FFFFFF !important;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(18, 38, 29, 0.12);
}
.fl a:hover svg {
color: #FFFFFF;
transform: scale(1.08);
}
.fl a:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(18, 38, 29, 0.06);
}
.fnote {
font-size: 0.84rem;
color: var(--gf-muted, #494840);
margin-top: 10px;
line-height: 1.5;
letter-spacing: 0.1px;
}
@media (max-width: 768px) {
footer {
padding: 14px 0 18px;
}
.fl {
gap: 6px 8px;
}
.fl a {
min-height: 30px;
padding: 4px 11px;
font-size: 0.82rem;
gap: 5px;
}
.fnote {
font-size: 0.78rem;
margin-top: 8px;
line-height: 1.45;
}
}
/* ---------- drawer ---------- */
.drawer{box-shadow:-22px 0 60px -26px rgba(7,21,16,.62)}
.dh{background:linear-gradient(180deg,#F6F2E6 0%,#F1ECDD 100%);border-bottom:1px solid var(--gf-brass-hair)}
.dh h3{font-family:var(--gf-serif);font-weight:600}
.note{border-bottom:1px solid var(--gf-border)}
/* keep the serif off anything the club may print at small size */
@media print{ .hdr:after{display:none} }
/* KGC-PREMIUM-LAYER-END */
/* :root hero image defined in main variables */
/* ============================================================================
KGC-PHOTO-LAYER (CLUB-SITE HEADER) — appended after the premium layer.
Variant C, after the Westlake pattern: a light menu bar, then the photograph
shown full-bleed and completely unobscured, with the greeting on an opaque
plate that straddles its lower edge.
The reasoning: a scrim is a tax you pay for putting words on a picture. Take
the words off the picture and you stop paying it — the course is shown as a
photograph rather than as a texture, and the greeting sits on a surface of
its own where its contrast is a fixed, known quantity.
The menu is real: every item points at a page this pack already contains.
========================================================================== */
/* ---------- the header is no longer one dark slab ---------- */
.hdr{background:none;box-shadow:none}
.hdr:after{display:none}
/* ---------- light menu bar ---------- */
.top{
background:var(--gf-paper, #FDFCF8);
color:var(--gf-primary-600, #12261D);
box-shadow:0 1px 0 rgba(0,0,0,.05), 0 6px 18px -14px rgba(7,21,16,.45);
}
.top:after{
height:1px;
background:linear-gradient(90deg,rgba(169,130,47,0),rgba(169,130,47,.42) 18%,
rgba(169,130,47,.70) 50%,rgba(169,130,47,.42) 82%,rgba(169,130,47,0));
}
.topin{padding:14px 22px 8px;gap:14px;row-gap:0}
.brand b{color:var(--gf-primary-600, #12261D);text-shadow:none}
.brand .sub{color:var(--gf-accent, #624B0E)}
.brand .logo{filter:none;box-shadow:0 1px 4px rgba(7,21,16,.18)}
/* ---------- the menu itself ---------- */
/* identity and actions on the first row, the menu on its own beneath — the
club-site convention, and the only way six labels, two buttons and the
text-size control fit without shrinking any of them */
.mainnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
order:3;width:100%;margin:8px 0 0;padding-top:6px;
border-top:1px solid rgba(169,130,47,.20)}
.mainnav a{
display:inline-flex;align-items:center;min-height:48px;padding:0 14px;
border-radius:10px;font-size:1.02rem;font-weight:600;
color:var(--gf-text, #494840);text-decoration:none;
border-bottom:3px solid transparent;
transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.mainnav a:hover{background:#F3F6F0;color:var(--gf-primary-600, #12261D)}
.mainnav a[aria-current="page"]{
color:var(--gf-primary-600, #12261D);
border-bottom-color:var(--gf-brass, #A9822F);
background:#F3F6F0;
}
.mainnav a:focus-visible{outline:3px solid var(--gf-accent, #624B0E);outline-offset:2px}
/* ---------- the two action buttons, as the reference has them ---------- */
.navacts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;order:2}
.navbtn{
display:inline-flex;align-items:center;justify-content:center;
min-height:48px;padding:0 18px;border-radius:10px;
font-size:.95rem;font-weight:700;text-decoration:none;white-space:nowrap;
transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.navbtn:active{transform:translateY(1px)}
.navbtn-primary{
background:linear-gradient(180deg,#1E4433,#12261D);color:var(--gf-paper, #FDFCF8);
border:1px solid #0C1A13;box-shadow:0 2px 8px -3px rgba(7,21,16,.5);
}
.navbtn-primary:hover{background:linear-gradient(180deg,#275140,#17372A)}
.navbtn-ghost{
background:var(--gf-paper, #FDFCF8);color:var(--gf-primary-600, #12261D);
border:1px solid var(--gf-border-strong, #CFC4A7);
}
.navbtn-ghost:hover{border-color:var(--gf-brass, #A9822F)}
.navbtn:focus-visible{outline:3px solid var(--gf-accent, #624B0E);outline-offset:2px}
/* the text-size control, restyled for a light bar */
.tsize{margin-left:0;order:2}
.tsize>span{opacity:1;color:var(--gf-text, #494840)}
.tsize .grp{
background:var(--gf-paper, #FDFCF8);
border:1px solid var(--gf-border-strong, #CFC4A7);
box-shadow:none;
}
.tsize button{color:var(--gf-primary-600, #12261D);border-left:1px solid var(--gf-border, #E3DDCC)}
.tsize button:first-child{border-left:0}
.tsize button[aria-pressed="true"]{
background:var(--gf-primary-500, #17372A);color:var(--gf-paper, #FDFCF8);box-shadow:none;
}
/* ---------- the photograph, shown as a photograph ---------- */
.hero{
position:relative;
padding:0;
min-height:clamp(300px, 33vw, 470px);
display:flex;align-items:flex-end;justify-content:center;
background-color:#0C1A13;
background-image:var(--kgc-hero);
background-size:cover;
background-position:center 56%;
background-repeat:no-repeat;
}
/* the only darkening anywhere on it: a whisper at the foot, so the plate has
something to stand on rather than floating */
.hero:before{
content:"";position:absolute;inset:auto 0 0 0;height:44%;pointer-events:none;
background:linear-gradient(180deg,rgba(6,19,14,0),rgba(6,19,14,.30));
}
.hero > .wrap{position:relative;z-index:1;width:100%;display:flex;justify-content:center;padding:0 22px}
/* ---------- the greeting, on a plate of its own ---------- */
.hero .who{
margin-bottom:-46px;
max-width:min(780px,100%);
padding:20px 32px;
background:linear-gradient(180deg,#17372A 0%,#0E241B 100%);
border:1px solid rgba(212,181,113,.42);
border-radius:16px;
box-shadow:0 18px 44px -18px rgba(7,21,16,.75), inset 0 1px 0 rgba(255,255,255,.09);
}
.hero h1{text-shadow:none}
/* the plate hangs into the page, so the page makes room for it */
main{padding-top:74px}
@media (max-width:860px){
.topin{padding:14px 18px;}
/* wraps to a second row rather than scrolling sideways — nothing here
should be hidden off-screen for members relying on the large-print,
low-vision-friendly design the rest of the page is built around */
.navacts{margin-left:auto}
.tsize{order:2}
.hero{min-height:236px}
.hero .who{padding:16px 20px;margin-bottom:-40px}
main{padding-top:66px}
}
@media (max-width:560px){
.navacts .navbtn-ghost{display:none}
}
@media print{
.hero{background-image:none!important;min-height:0}
.hero:before{display:none}
.mainnav,.navacts,.tsize{display:none}
.hero .who{margin-bottom:0;background:none;border:0;box-shadow:none;color:#000}
main{padding-top:0}
}
/* KGC-PHOTO-LAYER-CLUBSITE-END */
/* ============================================================================
KGC-GREETING-LAYER — four treatments for the greeting, switchable live.
The plate in the reference works because it holds three words of page title.
Ours was carrying a greeting, a photograph, a membership number and a status
— the wrong content for that shape, sitting in the middle of the best part
of the picture. Four ways out, so the choice can be made by looking:
bar the photograph is untouched; the greeting is a slim bar beneath
editorial the greeting sits on the quiet bottom-left corner, no box
title the plate says "My account"; the greeting moves onto the page
nav the photograph is completely clean; identity lives in the menu
Common to all four: the photograph becomes a block of its own rather than a
backdrop, so nothing has to be positioned on top of it unless we want it to.
========================================================================== */
.hero{
position:relative;display:block;padding:0;min-height:0;
background:none;
}
.hero:before{
content:"";position:static;inset:auto;display:block;width:100%;
height:var(--kgc-hero-height, 350px);
background-color:#0C1A13;
background-image:var(--kgc-hero);
background-size:cover;background-position:center 50%;background-repeat:no-repeat;
}
.hero > .wrap{position:static;display:block;width:auto;max-width:1120px;margin:0 auto;padding:0 22px}
.hero .who{margin:0;padding:0;max-width:none;background:none;border:0;border-radius:0;box-shadow:none}
.platetitle,.navme,.pagegreet{display:none}
main{padding-top:0}
/* ---------------------------------------------------------------- bar ---- */
html[data-greet="bar"] .hero > .wrap{
max-width:none;padding:0;
background:var(--gf-paper, #FDFCF8);
border-top:1px solid rgba(169,130,47,.45);
box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 20px -18px rgba(7,21,16,.4);
}
html[data-greet="bar"] .hero .who{
max-width:1120px;margin:0 auto;padding:12px 22px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
html[data-greet="bar"] .hero .who > div{
flex:1;min-width:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
html[data-greet="bar"] .hero h1{
font-size:1.15rem;color:var(--gf-primary-600, #12261D);text-shadow:none;
}
html[data-greet="bar"] .hero p{
margin:0 0 0 auto;color:var(--gf-text, #494840);opacity:1;font-size:.88rem;
}
html[data-greet="bar"] .hero .pav{width:48px;height:48px;border-radius:50%}
html[data-greet="bar"] main{padding-top:18px}
@media (max-width:640px){html[data-greet="bar"] main{padding-top:14px}}
/* ---------------------------------------------------------- editorial ---- */
/* the words sit on the fairway in the bottom-left, which is the quietest part
of this photograph — and on a soft corner wash, never a box */
html[data-greet="editorial"] .hero:after{
content:"";position:absolute;left:0;right:0;top:0;bottom:0;
height:100%;pointer-events:none;
background:
linear-gradient(102deg, rgba(6,19,14,.92) 0%, rgba(6,19,14,.84) 22%,
rgba(6,19,14,.60) 42%, rgba(6,19,14,.20) 58%,
rgba(6,19,14,0) 72%),
linear-gradient(180deg, rgba(6,19,14,0) 45%, rgba(6,19,14,.30) 75%, rgba(6,19,14,.70) 100%);
}
html[data-greet="editorial"] .hero > .wrap{
position:absolute;left:0;right:0;bottom:40px;z-index:1;
}
html[data-greet="editorial"] .hero .who{
display:flex;align-items:center;gap:14px;max-width:min(660px,58%);
}
html[data-greet="editorial"] .hero h1{font-size:1.42rem;text-shadow:0 1px 10px rgba(6,19,14,.5)}
html[data-greet="editorial"] .hero p{font-size:.88rem;margin-top:2px;opacity:1;text-shadow:0 1px 8px rgba(6,19,14,.5)}
html[data-greet="editorial"] .hero .pav{width:74px;height:74px;border-radius:50%}
html[data-greet="editorial"] main{padding-top:16px}
@media (max-width:1100px){
html[data-greet="editorial"] .hero:after{background:
linear-gradient(180deg, rgba(6,19,14,.24) 0%, rgba(6,19,14,.48) 35%,
rgba(6,19,14,.76) 70%, rgba(6,19,14,.92) 100%)}
html[data-greet="editorial"] .hero .who{max-width:100%}
}
@media (max-width:640px){
html[data-greet="editorial"] main{padding-top:14px}
html[data-greet="editorial"] .hero > .wrap{bottom:14px}
html[data-greet="editorial"] .hero h1{font-size:1.25rem}
html[data-greet="editorial"] .hero p{font-size:0.82rem}
html[data-greet="editorial"] .hero .pav{width:44px;height:44px}
}
/* -------------------------------------------------------------- title ---- */
html[data-greet="title"] .hero > .wrap{
display:flex;justify-content:center;margin-top:-38px;position:relative;z-index:1;
}
html[data-greet="title"] .hero .who{display:none}
html[data-greet="title"] .platetitle{
display:inline-flex;align-items:center;justify-content:center;
min-height:76px;padding:0 46px;border-radius:14px;
background:linear-gradient(180deg,#17372A 0%,#0E241B 100%);
border:1px solid rgba(212,181,113,.42);
box-shadow:0 18px 44px -18px rgba(7,21,16,.75), inset 0 1px 0 rgba(255,255,255,.09);
color:var(--gf-paper, #FDFCF8);font-size:1.5rem;font-weight:700;letter-spacing:.01em;
}
html[data-greet="title"] main{padding-top:60px}
html[data-greet="title"] .pagegreet{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
margin:0 0 26px;padding:18px 22px;
background:var(--gf-paper, #FDFCF8);
border:1px solid var(--gf-border, #E3DDCC);border-radius:14px;
box-shadow:0 1px 2px rgba(23,55,42,.05), 0 10px 26px -20px rgba(23,55,42,.34);
}
html[data-greet="title"] .pagegreet .pav{width:64px;height:64px;border-radius:50%;flex:none}
html[data-greet="title"] .pagegreet h2{font-size:1.46rem;color:var(--gf-primary-600, #12261D)}
html[data-greet="title"] .pagegreet p{color:var(--gf-text, #494840);margin-top:4px}
@media (max-width:640px){
html[data-greet="title"] .platetitle{min-height:62px;padding:0 26px;font-size:1.2rem}
html[data-greet="title"] .hero > .wrap{margin-top:-30px}
html[data-greet="title"] main{padding-top:48px}
}
/* ---------------------------------------------------------------- nav ---- */
html[data-greet="nav"] .hero > .wrap{display:none}
html[data-greet="nav"] main{padding-top:34px}
html[data-greet="nav"] .navme{
display:flex;align-items:center;gap:11px;order:2;
min-height:48px;padding:5px 16px 5px 5px;border-radius:999px;
background:var(--gf-paper, #FDFCF8);
border:1px solid var(--gf-border-strong, #CFC4A7);
text-decoration:none;
}
html[data-greet="nav"] .navme:hover{border-color:var(--gf-brass, #A9822F)}
.navme img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
box-shadow:0 0 0 2px rgba(169,130,47,.55)}
.navme-t b{display:block;font-size:.95rem;font-weight:700;line-height:1.2;
color:var(--gf-primary-600, #12261D)}
.navme-t > span{display:block;font-size:.9rem;color:var(--gf-text, #494840)}
.navme:focus-visible{outline:3px solid var(--gf-accent, #624B0E);outline-offset:2px}
/* -------------------------------------------------- the switcher itself --- */
.greetswitch{
position:fixed;right:18px;bottom:18px;z-index:60;
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:9px 12px;border-radius:14px;
background:rgba(14,36,27,.94);border:1px solid rgba(212,181,113,.4);
box-shadow:0 10px 30px -10px rgba(7,21,16,.7);
}
.greetswitch .gs-lb{font-size:.9rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:#EBCB86}
.greetswitch .gs-grp{display:flex;gap:4px;flex-wrap:wrap}
.greetswitch button{
min-height:44px;padding:0 14px;border:1px solid rgba(212,181,113,.34);
border-radius:9px;background:transparent;color:#FDFCF8;
font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
}
.greetswitch button:hover{background:rgba(255,255,255,.09)}
.greetswitch button[aria-pressed="true"]{background:#FDFCF8;color:#12261D;border-color:#FDFCF8}
.greetswitch button:focus-visible{outline:3px solid #D4B571;outline-offset:2px}
@media (max-width:700px){
.greetswitch{left:12px;right:12px;bottom:12px;justify-content:center}
}
@media print{.greetswitch{display:none}}
/* KGC-GREETING-LAYER-END */
/* ============================================================================
KGC-BUTTON-GREEN-LAYER — the solid green buttons, in #52d76c.
Applies while html[data-green="bright"]; data-green="dark" (#006400) is below,
and "original" leaves the club's own deep green untouched.
Covers the header "Book a tee time", the page's .btn.o buttons, the
selected text-size button, the icon tiles under "What would you like to
do?" and the "SATURDAY" date badge on the next-game card — so switching the
option previews the whole palette together, not just the buttons on their own.
Ink is the deep club green (#0C1A13 on #52d76c is about 10:1).
========================================================================== */
html[data-green="bright"] .navbtn-primary,
html[data-green="bright"] .btn.o,
html[data-green="bright"] .tsize button[aria-pressed="true"]{
background:#52d76c;color:#0C1A13;border-color:#3DBB56;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px -3px rgba(7,21,16,.35);
}
html[data-green="bright"] .navbtn-primary:hover,
html[data-green="bright"] .btn.o:hover{
background:#46C95F;color:#0C1A13;border-color:#3DBB56;
}
html[data-green="bright"] .tsize button[aria-pressed="true"]{box-shadow:none}
html[data-green="bright"] .do i.bx{
background:#52d76c;color:#0C1A13;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px #3DBB56,0 3px 8px -3px rgba(7,21,16,.35);
}
html[data-green="bright"] .date b{
background:#52d76c;color:#0C1A13;border-bottom-color:#3DBB56;
}
/* #006400 — same elements, ivory ink (#FCFAF5 on #006400 is about 8:1) */
html[data-green="dark"] .navbtn-primary,
html[data-green="dark"] .btn.o,
html[data-green="dark"] .tsize button[aria-pressed="true"]{
background:#006400;color:#FDFCF8;border-color:#004A00;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 8px -3px rgba(0,30,0,.5);
}
html[data-green="dark"] .navbtn-primary:hover,
html[data-green="dark"] .btn.o:hover{
background:#005200;color:#FDFCF8;border-color:#004A00;
}
html[data-green="dark"] .tsize button[aria-pressed="true"]{box-shadow:none}
html[data-green="dark"] .do i.bx{
background:#006400;color:#FDFCF8;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px #004A00,0 3px 8px -3px rgba(0,30,0,.5);
}
html[data-green="dark"] .date b{
background:#006400;color:#FDFCF8;border-bottom-color:#004A00;
}
/* KGC-BUTTON-GREEN-LAYER-END */
/* ============================================================================
KGC-FONT-LAYER — three typefaces, switchable live.
original Playfair Display headings over Inter body (what the page ships)
liberation Liberation Sans throughout
atkinson Atkinson Hyperlegible Next throughout — drawn by the Braille
Institute for low-vision readers: I, l and 1 are all distinct,
as are 0 and O, and the letters are open and wide. The page's
members are reading 18px+ text and have a text-size control,
which is the audience it was made for.
The universal selector is deliberate: headings, buttons and inputs each set
their own family, and a comparison only means something if nothing is left
behind in the old face.
========================================================================== */
html[data-font="liberation"],
html[data-font="liberation"] *,
html[data-font="liberation"] *:before,
html[data-font="liberation"] *:after,
html[data-font="atkinson"],
html[data-font="atkinson"] *,
html[data-font="atkinson"] *:before,
html[data-font="atkinson"] *:after,
html[data-font="original"],
html[data-font="original"] *,
html[data-font="original"] *:before,
html[data-font="original"] *:after{
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* KGC-FONT-LAYER-END */
/* ============================================================================
KGC-DENSITY-LAYER — a lighter reading mode, switchable live.
"Full" is the page as it ships: every tile, row and phone number carries a
descriptive sentence under its title. "Compact" drops just those secondary
sentences — titles, key numbers and phone numbers all stay — and gives the
five major sections more room to breathe instead, so the page reads as a
set of distinct blocks rather than one long column of near-identical cards.
========================================================================== */
html[data-density="compact"] .do .db2>span{display:none}
html[data-density="compact"] .row .rb .s{display:none}
html[data-density="compact"] .dl i{display:none}
html[data-density="compact"] .dept .dw{display:none}
html[data-density="compact"] .helpnote{display:none}
html[data-density="compact"] .block{margin-bottom:40px}
/* KGC-DENSITY-LAYER-END */
/* ============================================================================
KGC-SVCMENU-LAYER — "Club services" nav dropdown, replacing "Club rules"
and holding the links that used to be the "What would you like to do?"
tiles further down the page.
========================================================================== */
.navdd{position:relative;display:inline-flex}
.navdd-trigger{
display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;
border-radius:10px;font-size:1.02rem;font-weight:600;font-family:inherit;
color:var(--gf-text, #494840);background:transparent;border:0;
border-bottom:3px solid transparent;cursor:pointer;
transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.navdd-trigger:hover{background:#F3F6F0;color:var(--gf-primary-600, #12261D)}
.navdd-trigger[aria-expanded="true"]{
color:var(--gf-primary-600, #12261D);border-bottom-color:var(--gf-brass, #A9822F);background:#F3F6F0;
}
.navdd-trigger:focus-visible{outline:3px solid var(--gf-accent, #624B0E);outline-offset:2px}
.navdd-chev{transition:transform .15s ease}
.navdd-trigger[aria-expanded="true"] .navdd-chev{transform:rotate(180deg)}
.navdd-menu{
position:absolute;top:calc(100% + 8px);left:0;z-index:50;min-width:280px;
background:var(--gf-paper, #FDFCF8);border:1px solid var(--gf-border-strong, #CFC4A7);
border-radius:14px;box-shadow:0 18px 44px -18px rgba(7,21,16,.45);
padding:8px;display:flex;flex-direction:column;gap:2px;
opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.navdd-menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.navdd-menu a{
display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;
border-radius:10px;color:var(--gf-ink, #242320);text-decoration:none;font-weight:600;font-size:.98rem;
}
.navdd-menu a:hover{background:var(--gf-primary-050, #E9EEE6)}
.navdd-menu a svg{flex:none;width:20px;height:20px;color:var(--gf-primary-500, #1E3B2C)}
@media (max-width:560px){.navdd-menu{left:auto;right:0;min-width:260px}}
/* .top and .hero are siblings with the same z-index:1, so .hero (later in the
DOM) was painting over anything absolutely-positioned inside .top,
including this dropdown, no matter how high its own z-index was set. */
.top{z-index:2}
/* KGC-SVCMENU-LAYER-END */
/* ============================================================================
KGC-WHITEBG-LAYER — plain white page background, matching the "-light"
pages, instead of the textured ivory/brass-glow background this page
shipped with.
========================================================================== */
body{background:#FFFFFF}
/* KGC-WHITEBG-LAYER-END */
/* ============================================================================
KGC-TRANSPARENTNAV-LAYER — the top bar now floats transparently over the
hero photo (same idea as the "-light" pages) instead of sitting in its own
opaque bar above it. The photo itself is untouched — only the bar's
background and the nav/brand text colour (back to light-on-photo, with a
top scrim added to the shared hero photo for guaranteed contrast) change.
Applies across all four greeting modes, since .top and the shared
.hero:before rule are common to all of them.
========================================================================== */
.top{position:absolute;top:0;left:0;right:0;z-index:2;background:none;box-shadow:none}
.top:after{display:none}
.brand b{color:var(--gf-paper, #FCFAF5);text-shadow:0 1px 3px rgba(0,0,0,.34)}
.brand .sub{color:var(--gf-brass-text, #E9C26A)}
.brand .logo{filter:drop-shadow(0 1px 3px rgba(0,0,0,.38))}
/* the > combinator matters here — .navdd-menu's links are technically
descendants of .mainnav too, and must stay dark-on-white, not light */
.mainnav > a{color:var(--gf-paper, #FCFAF5);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.mainnav > a:hover{background:rgba(255,255,255,.14);color:var(--gf-paper, #FCFAF5)}
.mainnav > a[aria-current="page"]{
color:var(--gf-paper, #FCFAF5);border-bottom-color:var(--gf-brass, #A9822F);
background:rgba(255,255,255,.14);
}
.navdd-trigger{color:var(--gf-paper, #FCFAF5);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.navdd-trigger:hover{background:rgba(255,255,255,.14);color:var(--gf-paper, #FCFAF5)}
.navdd-trigger[aria-expanded="true"]{
color:var(--gf-paper, #FCFAF5);border-bottom-color:var(--gf-brass, #A9822F);
background:rgba(255,255,255,.14);
}
/* a top-down scrim on the shared hero photo, so the light nav text stays
legible no matter what's behind it — same technique as the other pages */
.hero:before{
background-image:
linear-gradient(180deg, rgba(6,19,14,.55) 0%, rgba(6,19,14,.16) 26%, rgba(6,19,14,0) 46%),
var(--kgc-hero);
background-size:cover, cover;
background-position:center top, center 56%;
}
@media print{.top{position:relative}}
/* KGC-TRANSPARENTNAV-LAYER-END */
/* ============================================================================
KGC-MOBILEMENU-LAYER — below the width where six nav labels stop fitting
one row, swap the inline nav for a single "Menu" button that opens a
slide-in drawer (reusing the .scrim/.drawer/.dh/.db components already
built for the "Why this page looks different" panel). Two things this
fixes at once: the header goes back to being one short, constant-height
row, so (a) it can never wrap on top of the greeting text the way the
inline nav did, and (b) that constant height means the transparent,
photo-over treatment can apply at every width again instead of only on
desktop — the header and photo now read as the same design at any size.
========================================================================== */
.navmenu-trigger {
display: none;
}
@media (max-width: 900px) {
.mainnav {
display: none;
}
.navmenu-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 18px;
margin-left: auto;
position: relative;
overflow: hidden;
z-index: 1;
border-radius: 14px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.3px;
font-family: inherit;
color: var(--gf-paper, #FCFAF5);
background: linear-gradient(135deg, rgba(30, 59, 44, 0.92) 0%, rgba(18, 38, 29, 0.96) 100%);
border: 1.5px solid rgba(212, 175, 55, 0.75);
cursor: pointer;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(212, 175, 55, 0.25);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
animation: navmenuPulse 2.8s infinite ease-in-out;
-webkit-tap-highlight-color: transparent;
}
/* Shimmer sweep effect across button */
.navmenu-trigger::after {
content: "";
position: absolute;
top: -50%;
left: -100%;
width: 60%;
height: 200%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.32) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(25deg);
animation: navmenuShimmer 3.6s infinite ease-in-out;
pointer-events: none;
z-index: 1;
}
/* Glowing gold beacon indicator dot */
.navmenu-trigger::before {
content: "";
position: absolute;
top: 7px;
right: 7px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #D4AF37;
box-shadow: 0 0 6px #F1D789;
animation: navmenuBeacon 1.8s infinite ease-in-out;
z-index: 2;
}
.navmenu-trigger:hover,
.navmenu-trigger:active {
background: linear-gradient(135deg, rgba(38, 76, 56, 0.96) 0%, rgba(24, 52, 38, 0.98) 100%);
border-color: #F1D789;
color: #FFFFFF;
transform: translateY(-1px) scale(1.03);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 18px rgba(212, 175, 55, 0.5);
}
.navmenu-trigger svg,
.navmenu-trigger span {
position: relative;
z-index: 2;
}
.navmenu-trigger svg {
flex: none;
width: 22px;
height: 22px;
stroke: #F1D789;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
transition: transform 0.25s ease;
animation: navmenuIconWiggle 4.2s infinite ease-in-out;
}
/* When drawer is already open, freeze animations */
.navmenu-trigger[aria-expanded="true"] {
animation: none !important;
background: rgba(30, 59, 44, 0.95) !important;
border-color: #D4AF37 !important;
box-shadow: none !important;
}
.navmenu-trigger[aria-expanded="true"]::before,
.navmenu-trigger[aria-expanded="true"]::after,
.navmenu-trigger[aria-expanded="true"] svg {
animation: none !important;
}
}
@media (max-width: 575.98px) {
.navmenu-trigger {
min-height: 44px;
padding: 0 14px;
font-size: 0.96rem;
gap: 7px;
border-radius: 12px;
}
.navmenu-trigger svg {
width: 20px;
height: 20px;
}
}
/* Eye-Catching Keyframe Animations */
@keyframes navmenuPulse {
0% {
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.65), 0 4px 12px rgba(0, 0, 0, 0.35);
border-color: rgba(212, 175, 55, 0.75);
transform: scale(1);
}
35% {
box-shadow: 0 0 0 7px rgba(212, 175, 55, 0), 0 0 16px 3px rgba(212, 175, 55, 0.45), 0 5px 14px rgba(0, 0, 0, 0.4);
border-color: #F1D789;
transform: scale(1.025);
}
70% {
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0), 0 4px 12px rgba(0, 0, 0, 0.35);
border-color: rgba(212, 175, 55, 0.75);
transform: scale(1);
}
100% {
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0), 0 4px 12px rgba(0, 0, 0, 0.35);
border-color: rgba(212, 175, 55, 0.75);
transform: scale(1);
}
}
@keyframes navmenuShimmer {
0%, 25% {
left: -100%;
}
60%, 100% {
left: 200%;
}
}
@keyframes navmenuBeacon {
0%, 100% {
transform: scale(0.85);
opacity: 0.65;
box-shadow: 0 0 4px rgba(212, 175, 55, 0.6);
}
50% {
transform: scale(1.35);
opacity: 1;
box-shadow: 0 0 10px 3px rgba(241, 215, 137, 0.95), 0 0 4px #FFFFFF;
}
}
@keyframes navmenuIconWiggle {
0%, 76%, 100% {
transform: rotate(0deg) scale(1);
}
80% {
transform: rotate(-10deg) scale(1.12);
}
85% {
transform: rotate(10deg) scale(1.12);
}
90% {
transform: rotate(-6deg) scale(1.08);
}
95% {
transform: rotate(4deg) scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
.navmenu-trigger,
.navmenu-trigger::before,
.navmenu-trigger::after,
.navmenu-trigger svg {
animation: none !important;
}
}
/* Drawer styling is consolidated in KGC-DRAWER-LAYER below */
/* KGC-STICKYFOOTER-LAYER */
html,body{height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
body>.hdr{flex:none}
body>main{flex:1 0 auto}
body>footer{flex:none}
/* KGC-STICKYFOOTER-LAYER-END */
/* ---------- pills ----------
The status tints are the account page's own, but its ink tokens were tuned
against white, not against these tints: on them they land between 4.4 and
7.0:1. Each ink is darkened here to clear 7:1 on its own tint, so a pill is
held to the same standard as the body text around it. */
.pill {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.9rem;
font-weight: 700;
padding: 5px 13px;
border-radius: 999px;
white-space: nowrap;
border: 2px solid transparent;
}
.pill.ok {
background: var(--gf-success-bg, #e6efe6);
color: var(--gf-success, #1c5636);
border-color: #c6d8c6;
}
.pill.wait {
background: var(--gf-accent-bg, #f7efda);
color: var(--gf-accent, #624b0e);
border-color: #e6d3a4;
}
.pill.warn {
background: var(--gf-warning-bg, #f8efdc);
color: var(--gf-warning, #6b4808);
border-color: #e7d3a6;
}
.pill.due {
background: var(--gf-danger-bg, #f8e9e6);
color: var(--gf-danger, #94201f);
border-color: #ebc7c0;
}
.pill.info {
background: var(--gf-info-bg, #e7eef2);
color: var(--gf-info, #144e6b);
border-color: #c6d9e1;
}
.pill.off {
background: var(--gf-surface, #f6f3ec);
color: #3f584a;
border-color: var(--gf-border-strong, #c3b99f);
}
/* ---------- tables that survive large print ----------
At 18px a dense grid stops working, so past 860px each row becomes a
stacked block and every cell carries its own column name. Nothing is
reachable only by remembering which column you were in. */
.tw {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.t {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
table.t th {
text-align: left;
font-size: 0.94rem;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--gf-muted, #494840);
padding: 13px 16px;
background: var(--gf-primary-100, #f2f5ee);
border-bottom: 2px solid var(--gf-border, #dad3c1);
white-space: nowrap;
}
table.t td {
padding: 15px 16px;
border-bottom: 2px solid var(--gf-border, #dad3c1);
vertical-align: middle;
}
table.t tr:last-child td {
border-bottom: 0;
}
table.t tbody tr:hover {
background: var(--gf-primary-100, #f2f5ee);
}
table.t .n {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
table.t .c {
text-align: center;
}
table.t th.n {
text-align: right;
}
table.t th.c {
text-align: center;
}
table.t td b {
font-weight: 700;
}
table.t td.a {
white-space: nowrap;
text-align: right;
}
table.t .d {
white-space: nowrap;
}
table.t th.a {
text-align: right;
}
@media (max-width: 860px) {
table.t td.a {
text-align: left !important;
}
}
table.t .sub {
display: block;
font-size: 0.94rem;
color: var(--gf-muted, #494840);
margin-top: 2px;
}
tr.tot td {
background: var(--gf-primary-050, #e9eee6);
font-weight: 700;
border-bottom: 0;
color: var(--gf-primary-600, #12261d);
}
@media (max-width: 860px) {
table.t,
table.t tbody,
table.t tr,
table.t td {
display: block;
width: 100%;
}
table.t thead {
display: none;
}
table.t tr {
border-bottom: 2px solid var(--gf-border, #dad3c1);
padding: 8px 0;
}
table.t tr:last-child {
border-bottom: 0;
}
table.t td {
border-bottom: 0;
padding: 6px 16px;
text-align: left !important;
}
table.t td:before {
content: attr(data-th) " ";
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--gf-muted, #494840);
display: block;
margin-bottom: 1px;
}
table.t td:empty {
display: none;
}
}
/* ---------- tee-time and flight slots ---------- */
.slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: 12px;
}
.slot {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 14px 16px;
background: var(--gf-paper, #fcfaf5);
border: 2px solid var(--gf-border, #dad3c1);
border-radius: 12px;
min-height: 86px;
justify-content: center;
cursor: pointer;
transition: 0.12s;
font-family: inherit;
text-align: left;
width: 100%;
}
.slot b {
font-size: 1.14rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.slot span {
font-size: 0.94rem;
color: var(--gf-muted, #494840);
}
.slot:hover {
border-color: var(--gf-primary-400, #2a5240);
box-shadow: 0 3px 10px rgba(var(--gf-shadow-rgb, 18, 38, 29), 0.14);
}
.slot.sel {
background: linear-gradient(
180deg,
var(--gf-primary-600, #12261d) 0%,
var(--gf-primary-700, #0c1a13) 100%
);
border-color: var(--gf-primary-700, #0c1a13);
color: var(--gf-paper, #fcfaf5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.26),
0 2px 6px rgba(0, 0, 0, 0.2);
}
.slot.sel span {
color: rgba(255, 255, 255, 0.92);
}
.slot.full {
background: var(--gf-surface, #f6f3ec);
color: var(--gf-text, #494840);
cursor: not-allowed;
border-style: dashed;
box-shadow: none;
}
.slot.full b {
font-weight: 600;
}
/* ---------- day strip ---------- */
.days {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 11px;
}
@media (max-width: 700px) {
.days {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 430px) {
.days {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
html[data-size="xl"] .days {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.day {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 13px 8px;
background: var(--gf-paper, #fcfaf5);
border: 2px solid var(--gf-border, #dad3c1);
border-radius: 14px;
cursor: pointer;
transition: 0.12s;
font-family: inherit;
min-height: 96px;
justify-content: center;
width: 100%;
}
.day em {
font-style: normal;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--gf-muted, #494840);
}
.day b {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.15;
}
.day i {
font-style: normal;
font-size: 0.92rem;
color: var(--gf-muted, #494840);
}
.day:hover {
border-color: var(--gf-primary-400, #2a5240);
}
.day.sel {
background: linear-gradient(
180deg,
var(--gf-primary-600, #12261d) 0%,
var(--gf-primary-700, #0c1a13) 100%
);
border-color: var(--gf-primary-700, #0c1a13);
color: var(--gf-paper, #fcfaf5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.26),
0 2px 6px rgba(0, 0, 0, 0.2);
}
.day.sel em,
.day.sel i {
color: rgba(255, 255, 255, 0.92);
}
.day.off {
background: var(--gf-surface, #f6f3ec);
color: var(--gf-text, #494840);
border-style: dashed;
cursor: not-allowed;
}
/* ---------- forms ---------- */
.fgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
}
.f label {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: var(--gf-text, #494840);
margin-bottom: 7px;
}
.f select,
.f input,
.f textarea {
width: 100%;
min-height: 60px;
padding: 12px 16px;
font-family: inherit;
font-size: 1.03rem;
color: var(--gf-ink, #242320);
background: var(--gf-paper, #fcfaf5);
border: 2px solid var(--gf-border-strong, #c3b99f);
border-radius: 12px;
}
.f select:focus,
.f input:focus {
border-color: var(--gf-primary-400, #2a5240);
outline: 0;
box-shadow: 0 0 0 3px rgba(var(--gf-shadow-rgb, 18, 38, 29), 0.16);
}
.f .fh {
display: block;
font-size: 0.92rem;
color: var(--gf-muted, #494840);
margin-top: 6px;
}
.f input[readonly] {
background: var(--gf-surface, #f6f3ec);
color: var(--gf-text, #494840);
}
/* ---------- money and summary ---------- */
.sum {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 18px 20px;
background: var(--gf-primary-050, #e9eee6);
border: 2px solid var(--gf-primary-400, #2a5240);
border-radius: 14px;
margin-top: 28px;
}
.sum .big {
display: block;
font-size: 1.85rem;
font-weight: 700;
color: var(--gf-primary-600, #12261d);
font-variant-numeric: tabular-nums;
line-height: 1.2;
margin: 2px 0 3px;
}
.sum .lb {
display: block;
font-size: 0.95rem;
color: var(--gf-text, #494840);
}
.sum .rt {
margin-left: auto;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.sum .rt .btn {
flex: none;
min-width: 200px;
}
@media (max-width: 620px) {
.sum .rt {
margin-left: 0;
width: 100%;
}
.sum .rt .btn {
min-width: 100%;
}
}
/* ---------- labelled detail grid ----------
Replaces a headerless table: every value carries its own label, so nothing
depends on remembering which column you were looking at. */
.dg {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
gap: 15px 24px;
margin-bottom: 17px;
}
.dg > div {
min-width: 0;
}
.dg .l {
display: block;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--gf-muted, #494840);
margin-bottom: 2px;
}
.dg .v {
display: block;
font-size: 1.03rem;
font-weight: 600;
line-height: 1.4;
}
/* ---------- flight card ---------- */
.fl2 {
background: var(--gf-paper, #fcfaf5);
border: 2px solid var(--gf-border, #dad3c1);
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 14px;
}
.fl2.sel {
border-color: var(--gf-primary-400, #2a5240);
box-shadow: 0 0 0 3px rgba(var(--gf-shadow-rgb, 18, 38, 29), 0.13);
}
.fl2 .fh2 {
display: flex;
align-items: center;
gap: 13px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.fl2 .fh2 b {
font-size: 1.16rem;
font-variant-numeric: tabular-nums;
}
.fl2 .fh2 .rt {
margin-left: auto;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.who2 {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.who2 > span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
padding: 7px 14px 7px 8px;
background: var(--gf-surface, #f6f3ec);
border: 2px solid var(--gf-border, #dad3c1);
border-radius: 999px;
}
.who2 > span i {
width: 30px;
height: 30px;
border-radius: 50%;
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-style: normal;
font-size: 0.9rem;
font-weight: 700;
background: var(--gf-primary-050, #e9eee6);
color: var(--gf-primary-600, #12261d);
border: 2px solid var(--gf-primary-300, #38684f);
}
.who2 > span.free {
border-style: dashed;
color: var(--gf-muted, #494840);
}
.who2 > span.free i {
background: var(--gf-paper, #fcfaf5);
border-style: dashed;
border-color: var(--gf-border-strong, #c3b99f);
color: var(--gf-muted, #494840);
}
.who2 > span.you {
background: var(--gf-primary-050, #e9eee6);
border-color: var(--gf-primary-400, #2a5240);
font-weight: 700;
color: var(--gf-primary-600, #12261d);
}
/* ---------- action row ----------
The button and the thing you need to know before pressing it (how many
places are left) sit on one line, so availability is never orphaned in a
grid cell of its own. */
.act {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.act .btn {
flex: none;
min-width: 230px;
}
.act .mt {
margin-left: auto;
}
@media (max-width: 620px) {
.act .btn {
min-width: 100%;
}
.act .mt {
margin-left: 0;
}
}
/* ---------- meter ---------- */
.mt {
display: flex;
align-items: center;
gap: 11px;
font-size: 0.94rem;
color: var(--gf-muted, #494840);
}
.mt .bar {
width: 104px;
height: 11px;
border-radius: 99px;
background: var(--gf-surface, #f6f3ec);
border: 2px solid var(--gf-border-strong, #c3b99f);
overflow: hidden;
flex: none;
}
.mt .bar i {
display: block;
height: 100%;
background: var(--gf-primary-300, #38684f);
}
.mt .bar.hot i {
background: var(--gf-warning, #6b4808);
}
/* ---------- empty state ---------- */
.empty {
text-align: center;
padding: 56px 24px;
}
.empty i {
width: 82px;
height: 82px;
border-radius: 50%;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
180deg,
var(--gf-paper, #fcfaf5) 0%,
var(--gf-primary-050, #e9eee6) 100%
);
color: var(--gf-primary-600, #12261d);
border: 2px solid var(--gf-primary-300, #38684f);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 2px 5px rgba(0, 0, 0, 0.1);
}
.empty b {
display: block;
font-size: 1.22rem;
margin-bottom: 7px;
}
.empty p {
color: var(--gf-text, #494840);
max-width: 460px;
margin: 0 auto 20px;
}
/* ---------- filter bar ---------- */
.fb {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 16px;
}
.fb .ch {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 52px;
padding: 9px 18px;
background: var(--gf-paper, #fcfaf5);
border: 2px solid var(--gf-border-strong, #c3b99f);
border-radius: 12px;
font-size: 0.98rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
color: var(--gf-ink, #242320);
}
.fb .ch:hover {
border-color: var(--gf-primary-400, #2a5240);
}
.fb .ch.on {
background: var(--gf-primary-050, #e9eee6);
border-color: var(--gf-primary-400, #2a5240);
color: var(--gf-primary-600, #12261d);
}
.fb .ch em {
font-style: normal;
font-size: 0.95rem;
font-weight: 700;
opacity: 1;
color: var(--gf-primary-600, #12261d);
background: var(--gf-primary-050, #e9eee6);
border-radius: 999px;
min-width: 28px;
padding: 2px 9px;
text-align: center;
line-height: 1.45;
}
.fb .ch.on em {
background: var(--gf-primary-600, #12261d);
color: var(--gf-paper, #fcfaf5);
}
.fb .sp {
margin-left: auto;
}
@media (max-width: 620px) {
.fb .sp {
margin-left: 0;
}
}
.chsel {
display: inline-flex;
align-items: center;
min-height: 52px;
padding: 9px 40px 9px 18px;
background: var(--gf-paper, #fcfaf5)
url("data:image/svg+xml;utf8,")
no-repeat right 14px center/16px 16px;
border: 2px solid var(--gf-border-strong, #c3b99f);
border-radius: 12px;
font-size: 0.98rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
color: var(--gf-ink, #242320);
-webkit-appearance: none;
appearance: none;
}
.chsel:hover {
border-color: var(--gf-primary-400, #2a5240);
}
.chsel:focus-visible {
outline: 3px solid var(--gf-accent, #624b0e);
outline-offset: 2px;
}
/* ---------- inline bold inside a row ----------
base.css sets `.rb b{display:block}` for the row title. That also catches
any used for emphasis inside the two lines under it, breaking a
sentence across three lines. Scope the block rule to the title only. */
.rb > b {
display: block;
}
.rb .m b,
.rb .s b {
display: inline;
font-size: inherit;
line-height: inherit;
}
/* ---------- in-content link ----------
A text link inside a table row is still a tap target: 44px tall, so it can
be hit on a phone by someone who is not aiming carefully. */
.lnk {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 600;
color: var(--gf-primary-600, #12261d);
}
.lnk:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- misc ---------- */
.tw + .tw {
margin-top: 0;
}
.pad {
padding: 20px;
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 22px;
align-items: start;
}
@media (max-width: 960px) {
.split {
grid-template-columns: 1fr;
}
}
html[data-size="xl"] .split {
grid-template-columns: 1fr;
}
.aside .card {
margin-bottom: 16px;
}
.kv {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 2px solid var(--gf-border, #dad3c1);
font-size: 1rem;
}
.kv:last-child {
border-bottom: 0;
}
.kv span {
color: var(--gf-muted, #494840);
}
.kv b {
font-weight: 700;
text-align: right;
font-variant-numeric: tabular-nums;
}
.kv.big b {
font-size: 1.3rem;
color: var(--gf-primary-600, #12261d);
}
.tick {
width: 96px;
height: 96px;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gf-paper, #fcfaf5);
background: linear-gradient(
180deg,
var(--gf-primary-300, #38684f) 0%,
var(--gf-primary-300, #38684f) 60%,
var(--gf-primary-500, #1e3b2c) 100%
);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.42),
inset 0 -3px 0 rgba(0, 0, 0, 0.2),
0 4px 12px rgba(0, 0, 0, 0.2);
}
.done {
text-align: center;
padding: 38px 24px 30px;
}
.done h2 {
font-size: 1.62rem;
margin-bottom: 8px;
}
.done > p {
color: var(--gf-text, #494840);
max-width: 520px;
margin: 0 auto 24px;
font-size: 1.05rem;
}
.rcpt {
max-width: 520px;
margin: 0 auto;
text-align: left;
background: var(--gf-primary-100, #f2f5ee);
border: 2px solid var(--gf-border, #dad3c1);
border-radius: 14px;
padding: 6px 20px;
}
.dbtns {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 24px;
}
.dbtns .btn {
flex: none;
min-width: 220px;
}
@media (max-width: 620px) {
.dbtns .btn {
min-width: 100%;
}
}
.nb {
display: flex;
gap: 13px;
padding: 16px 18px;
background: var(--gf-info-bg, #e7eef2);
border: 2px solid #c2dbe8;
border-radius: 14px;
font-size: 0.98rem;
color: #125275;
}
.nb.warn {
background: var(--gf-warning-bg, #f8efdc);
border-color: #eed9ae;
color: #704707;
}
.nb b {
display: block;
margin-bottom: 2px;
}
.nb svg {
margin-top: 2px;
}
.kv{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
border-bottom:2px solid var(--gf-border, #DAD3C1);font-size:1rem}
.kv:last-child{border-bottom:0}
.kv span{color:var(--gf-muted, #494840)}
.kv b{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.kv.big b{font-size:1.3rem;color:var(--gf-primary-600, #12261D)}
.tick{width:96px;height:96px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;
justify-content:center;color:var(--gf-paper, #FCFAF5);
background:linear-gradient(180deg,var(--gf-primary-300, #38684F) 0%,
var(--gf-primary-300, #38684F) 60%,var(--gf-primary-500, #1E3B2C) 100%);
box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(0,0,0,.20),
0 4px 12px rgba(0,0,0,.20)}
.done{text-align:center;padding:38px 24px 30px}
.done h2{font-size:1.62rem;margin-bottom:8px}
.done>p{color:var(--gf-text, #494840);max-width:520px;margin:0 auto 24px;font-size:1.05rem}
.rcpt{max-width:520px;margin:0 auto;text-align:left;background:var(--gf-primary-100, #F2F5EE);
border:2px solid var(--gf-border, #DAD3C1);border-radius:14px;padding:6px 20px}
.dbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.dbtns .btn{flex:none;min-width:220px}
@media (max-width:620px){.dbtns .btn{min-width:100%}}
.nb{display:flex;gap:13px;padding:16px 18px;background:var(--gf-info-bg, #E7EEF2);
border:2px solid #C2DBE8;border-radius:14px;font-size:.98rem;color:#125275}
.nb.warn{background:var(--gf-warning-bg, #F8EFDC);border-color:#EED9AE;color:#704707}
.nb b{display:block;margin-bottom:2px}
.nb svg{margin-top:2px}
/* ============================================================================
KGC-DATEPICK-LAYER — a calendar drawer alongside the seven-day quick strip,
and the caddie/cart fields split out of the old combined dropdown.
========================================================================== */
/* the caddie toggle, styled to match the 60px form controls beside it */
.lbllike{display:block;font-size:.95rem;font-weight:700;color:var(--gf-text, #494840);margin-bottom:7px}
.swtch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;
padding:10px 16px;background:var(--gf-paper, #FCFAF5);border:2px solid var(--gf-border-strong, #C3B99F);
border-radius:12px}
.swtch-row b{display:block;font-size:1.03rem;font-weight:700;color:var(--gf-ink, #242320)}
.swtch-row .fh{margin-top:3px}
.swtch{position:relative;display:inline-block;flex:none;width:56px;height:32px}
.swtch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.swtch i{position:absolute;inset:0;background:var(--gf-border-strong, #C3B99F);border-radius:999px;
transition:.15s;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.swtch i:before{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.15s}
.swtch input:checked + i{background:var(--gf-primary-500, #1E3B2C)}
.swtch input:checked + i:before{transform:translateX(24px)}
.swtch input:focus-visible + i{outline:3px solid var(--gf-accent, #624B0E);outline-offset:2px}
/* notes-drawer pattern, reused for the calendar */
.calnav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 16px}
.calnav b{font-size:1.1rem;font-weight:700;color:var(--gf-primary-600, #12261D)}
.calnav button{min-width:44px;min-height:44px;border-radius:10px;border:2px solid var(--gf-border-strong, #C3B99F);
background:var(--gf-paper, #FCFAF5);font-size:1.3rem;line-height:1;cursor:pointer;font-family:inherit;
color:var(--gf-ink, #242320)}
.calnav button:hover{border-color:var(--gf-primary-400, #2A5240)}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calwd{text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
color:var(--gf-muted, #494840);padding-bottom:6px}
.calpad{visibility:hidden}
.calday{aspect-ratio:1/1;min-height:44px;display:flex;align-items:center;justify-content:center;
background:var(--gf-paper, #FCFAF5);border:2px solid var(--gf-border, #DAD3C1);border-radius:10px;
font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:.12s;color:var(--gf-ink, #242320)}
.calday:hover:not(:disabled){border-color:var(--gf-primary-400, #2A5240)}
.calday.sel{background:linear-gradient(180deg,var(--gf-primary-600, #12261D) 0%,
var(--gf-primary-700, #0C1A13) 100%);border-color:var(--gf-primary-700, #0C1A13);color:var(--gf-paper, #FCFAF5)}
.calday.istoday{border-color:var(--gf-brass, #A9822F);border-style:dashed}
.calday:disabled{background:var(--gf-surface, #F6F3EC);color:var(--gf-muted, #494840);cursor:not-allowed;
border-style:dashed;opacity:.7}
@media (max-width:420px){.calday{font-size:.92rem}}
/* the "steps" wizard is gone now that day + tee time show at a glance in one
bar, so this replaces it rather than sitting above it */
.picksbar{display:flex;align-items:stretch;width:100%;background:var(--gf-paper, #FCFAF5);
border:2px solid var(--gf-border-strong, #C3B99F);border-radius:var(--gf-r-lg, 16px);
margin-bottom:24px}
.pickfield-wrap{position:relative;flex:1.25 1 0;min-width:160px;display:flex}
.pickfield{width:100%;flex:1 1 auto;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px;
background:transparent;border:0;cursor:pointer;text-align:left;font-family:inherit;transition:background .12s}
.pickfield:hover{background:var(--gf-primary-050, #E9EEE6)}
.picksbar>.pickfield-wrap:first-child .pickfield,
.picksbar>.pfcell:first-child{border-radius:14px 0 0 14px}
.pfcell{flex:1 1 0;min-width:110px;display:flex;flex-direction:column;justify-content:center;
gap:2px;padding:8px 18px;min-height:52px;cursor:pointer;transition:background .12s}
.pfcell:hover{background:var(--gf-primary-050, #E9EEE6)}
.picksbar>.pfcell:last-child,
.picksbar>.pickfield-wrap:last-child .pickfield{border-radius:0 14px 14px 0}
.pickfield-wrap:last-child .ttdrop{left:auto;right:0}
.pf-select{border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23494840' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center;
padding:0 18px 0 0;margin:0;font:inherit;font-size:.94rem;font-weight:700;color:var(--gf-ink, #242320);
-webkit-appearance:none;appearance:none;cursor:pointer;width:100%}
.pf-select:focus-visible{outline:2px solid var(--gf-primary-400, #2A5240);outline-offset:2px;border-radius:4px}
.pf-caddie{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.pf-ic{flex:none;width:19px;height:19px;color:var(--gf-primary-500, #1E3B2C)}
.pf-lb{display:block;font-size:.72rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
color:var(--gf-muted, #494840)}
.pf-t{min-width:0}
.pf-t b{display:block;font-size:.94rem;font-weight:700;color:var(--gf-ink, #242320);margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pickdiv{width:2px;flex:none;margin:8px 0;background:var(--gf-border, #DAD3C1)}
@media (max-width:900px){
.pickfield, .pfcell{min-height:60px !important}
}
@media (max-width:768px){
.picksbar{flex-wrap:wrap}
.pickfield, .pfcell{min-height:60px !important}
}
@media (max-width:560px){
.picksbar{flex-direction:column}
.pickdiv{width:auto;height:2px;margin:0 20px}
.pickfield, .pfcell{min-height:65px !important}
.picksbar>.pickfield-wrap:first-child .pickfield,
.picksbar>.pfcell:first-child{border-radius:14px 14px 0 0}
.picksbar>.pfcell:last-child,
.picksbar>.pickfield-wrap:last-child .pickfield{border-radius:0 0 14px 14px}
}
.ttdrop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;
width:320px;max-width:calc(100vw - 40px);
background:var(--gf-paper, #FCFAF5);border:2px solid var(--gf-border-strong, #C3B99F);
border-radius:14px;box-shadow:0 14px 34px -16px rgba(var(--gf-shadow-rgb, 18,38,29),.5);
padding:14px 16px 16px;max-height:360px;overflow:auto;
opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
transition:opacity .14s ease,transform .14s ease,visibility .14s}
.ttdrop.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.ttdrop-grp{font-size:.8rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
color:var(--gf-muted, #494840);margin:14px 0 8px}
.ttdrop-grp:first-child{margin-top:0}
.ttdrop-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ttdrop-item{min-height:44px;padding:8px;background:var(--gf-surface, #F6F3EC);
border:2px solid var(--gf-border, #DAD3C1);border-radius:10px;font-family:inherit;
font-size:.96rem;font-weight:700;cursor:pointer;color:var(--gf-ink, #242320);transition:.12s}
.ttdrop-item:hover{border-color:var(--gf-primary-400, #2A5240);background:var(--gf-paper, #FCFAF5)}
@media (max-width:560px){.ttdrop{left:20px;right:20px;width:auto;max-width:none}}
/* the calendar, now a compact popover matching the tee-time dropdown instead
of a full-height side drawer */
.caldrop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;
width:320px;max-width:calc(100vw - 40px);
background:var(--gf-paper, #FCFAF5);border:2px solid var(--gf-border-strong, #C3B99F);
border-radius:14px;box-shadow:0 14px 34px -16px rgba(var(--gf-shadow-rgb, 18,38,29),.5);
padding:14px 16px 16px;max-height:400px;overflow:auto;
opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
transition:opacity .14s ease,transform .14s ease,visibility .14s}
.caldrop.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
@media (max-width:560px){.caldrop{left:0;right:auto;width:auto;max-width:none}}
/* the "choose a date/time" placeholder look, before anything's picked */
.pf-empty{color:var(--gf-muted, #494840);font-weight:600}
.btn.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}
@media (max-width:520px){.ttdrop-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* KGC-DATEPICK-LAYER-END */
/* KGC-BOOKMODAL-LAYER — in-page confirm + success popup for tee-time booking, no redirect */
.modal-wrap{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
.modal-wrap.open{opacity:1;visibility:visible;pointer-events:auto}
.modal-card{background:var(--gf-paper, #FCFAF5);border:1px solid var(--gf-border-strong, #CFC4A7);
border-radius:16px;max-width:560px;width:100%;max-height:90vh;overflow:auto;position:relative;
box-shadow:0 30px 70px -20px rgba(7,21,16,.45);
transform:translateY(10px) scale(.98);transition:transform .2s}
.modal-wrap.open .modal-card{transform:translateY(0) scale(1)}
.modal-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
border:0;background:transparent;color:var(--gf-muted, #494840);font-size:1.6rem;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.modal-close:hover{background:var(--gf-primary-100, #F2F5EE)}
.modal-card .done{padding:44px 26px 30px}
/* KGC-BOOKMODAL-LAYER-END */
/* KGC-PAYMETHOD-LAYER — choosing SSLCommerz or Trust Bank now happens inside
the confirm popup itself, right before the member commits to paying,
rather than as its own section on the page */
.pm-heading{font-size:1rem;font-weight:700;text-align:left;margin:22px 0 10px}
.paymethod-list{display:flex;flex-direction:column;gap:10px;text-align:left}
.paymethod-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;
border:2px solid var(--gf-border, #DAD3C1);border-radius:12px;background:var(--gf-paper, #FCFAF5);
cursor:pointer;font:inherit;text-align:left;transition:border-color .12s ease,background .12s ease}
.paymethod-row:hover{border-color:var(--gf-border-strong, #C3B99F)}
.paymethod-row .pm-radio{width:22px;height:22px;border-radius:50%;flex:none;position:relative;
border:2px solid var(--gf-border-strong, #C3B99F);background:var(--gf-paper, #FCFAF5)}
.paymethod-row .pm-label{flex:1;font-size:1.04rem;font-weight:600;color:var(--gf-ink, #242320)}
.paymethod-row .pm-badge{width:44px;height:32px;border-radius:8px;flex:none;color:#fff;
display:flex;align-items:center;justify-content:center}
.paymethod-row .pm-badge.sslcz{background: #7D1C1C}
.paymethod-row .pm-badge.trust{background:linear-gradient(135deg,#8B3A2E,#6B2B22)}
.paymethod-row[aria-pressed="true"]{border-color:var(--gf-primary-500, #1E3B2C);background:var(--gf-primary-050, #E9EEE6)}
.paymethod-row[aria-pressed="true"] .pm-radio{border-color:var(--gf-primary-500, #1E3B2C)}
.paymethod-row[aria-pressed="true"] .pm-radio:after{content:"";position:absolute;inset:4px;
border-radius:50%;background:var(--gf-primary-500, #1E3B2C)}
/* KGC-PAYMETHOD-LAYER-END */
/* KGC-MESSAGES-LAYER — an in-page "communication history" composer, the same
idea as Odoo's chatter on a record, restyled to match the rest of the pack
rather than its plain grey default */
.msg-thread{display:none;margin-bottom:18px}
.msg-thread .msg-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--gf-border, #DAD3C1)}
.msg-thread .msg-row:first-child{padding-top:0}
.msg-thread .msg-row:last-child{border-bottom:0;padding-bottom:0}
.msg-thread .msg-row .msg-avatar{width:40px;height:40px;font-size:.85rem}
.msg-body{flex:1;min-width:0}
.msg-body .msg-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.msg-body b{font-size:.98rem}
.msg-body .msg-when{font-size:.85rem;color:var(--gf-muted, #494840)}
.msg-body p{margin-top:4px;line-height:1.55}
.msg-body .msg-file{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;
border:1px solid var(--gf-border, #DAD3C1);border-radius:10px;font-size:.9rem;color:var(--gf-text, #494840)}
.msg-empty{text-align:center;padding:20px 10px 26px}
.msg-empty span{font-size:2rem;line-height:1}
.msg-compose{display:flex;gap:14px;align-items:flex-start}
.msg-avatar{width:44px;height:44px;border-radius:50%;background:var(--gf-primary-100, #F2F5EE);
color:var(--gf-primary-600, #12261D);display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:.95rem;flex:none}
.msg-inputwrap{flex:1;min-width:0}
#msg-input{width:100%;min-height:52px;max-height:220px;resize:none;overflow:hidden;
border:2px solid var(--gf-border, #DAD3C1);border-radius:12px;padding:13px 16px;
font:inherit;font-size:1rem;color:var(--gf-ink, #242320);background:var(--gf-paper, #FCFAF5)}
#msg-input:focus-visible{outline:3px solid var(--gf-accent, #624B0E);outline-offset:2px;border-color:var(--gf-primary-400, #2A5240)}
.msg-attachchip{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:6px 12px;
border:1px solid var(--gf-border-strong, #C3B99F);border-radius:20px;font-size:.9rem;
background:var(--gf-primary-050, #E9EEE6);color:var(--gf-primary-600, #12261D)}
.msg-attachchip button{background:transparent;border:0;color:inherit;cursor:pointer;font-size:1.1rem;
line-height:1;padding:0;min-height:0}
.msg-actions{display:flex;align-items:center;justify-content:space-between;margin-top:12px;margin-left:58px}
.msg-attach{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
border-radius:10px;color:var(--gf-muted, #494840);cursor:pointer}
.msg-attach:hover{background:var(--gf-primary-050, #E9EEE6);color:var(--gf-primary-600, #12261D)}
.msg-attach input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#msg-send{min-height:48px;padding:0 26px}
@media (max-width:520px){.msg-actions{margin-left:0}}
/* KGC-MESSAGES-LAYER-END */
/* ============================================================================
KGC-SUBPAGE-HERO-LAYER — floating white card for subpages (-light variants)
========================================================================== */
html:not([data-greet="editorial"]) body {
background: #ffffff;
}
html:not([data-greet="editorial"]) .topin {
max-width: none;
padding: 20px 28px;
display: flex;
align-items: center;
gap: 14px;
}
.backicon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.4);
transition: background 0.12s ease;
}
.backicon:hover {
background: rgba(255, 255, 255, 0.28);
}
.backicon:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.backicon svg {
width: 20px;
height: 20px;
stroke: currentColor;
}
html:not([data-greet="editorial"]) .hero:before {
content: "";
display: block;
width: 100%;
height: var(--kgc-hero-height, 350px);
background-color: #0c1a13;
background-image:
linear-gradient(180deg, rgba(6, 19, 14, 0.55) 0%, rgba(6, 19, 14, 0.16) 32%, rgba(6, 19, 14, 0) 55%),
var(--kgc-hero-sub);
background-size: cover, cover;
background-position: center top, center 22%;
background-repeat: no-repeat, no-repeat;
}
html:not([data-greet="editorial"]) .hero > .wrap {
position: relative;
z-index: 1;
margin-top: -30px;
background: var(--gf-paper, #fdfcf8);
border: 1px solid var(--gf-border-strong, #cfc4a7);
border-radius: 14px;
box-shadow: 0 18px 40px -18px rgba(7, 21, 16, 0.35);
padding: 14px 20px;
}
html:not([data-greet="editorial"]) .hero .back {
color: var(--gf-text, #494840);
opacity: 1;
}
html:not([data-greet="editorial"]) .hero .back:hover {
color: var(--gf-primary-600, #12261d);
}
html:not([data-greet="editorial"]) .hero h1 {
color: var(--gf-primary-600, #12261d);
text-shadow: none;
}
html:not([data-greet="editorial"]) .hero p {
color: var(--gf-text, #494840);
opacity: 1;
}
html:not([data-greet="editorial"]) .hero .hme {
background: var(--gf-paper, #fdfcf8);
border: 1px solid var(--gf-border-strong, #cfc4a7);
box-shadow: none;
}
html:not([data-greet="editorial"]) .hero .hme b {
color: var(--gf-primary-600, #12261d);
}
html:not([data-greet="editorial"]) .hero .hme span {
color: var(--gf-text, #494840);
}
html:not([data-greet="editorial"]) .hero .pav {
box-shadow: 0 0 0 2px var(--gf-brass, #a9822f), 0 4px 12px rgba(7, 21, 16, 0.22);
}
@media (max-width: 640px) {
html:not([data-greet="editorial"]) .hero > .wrap {
margin-top: -20px;
padding: 12px 16px;
border-radius: 12px;
}
html:not([data-greet="editorial"]) .topin {
padding: 12px 16px;
}
}
.htop {
display: flex;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
}
.htop > div:first-child {
flex: 1;
min-width: min(100%, 320px);
}
/* ============================================================================
KGC-DRAWER-LAYER — mobile navigation drawer & backdrop scrim
Lush Kurmitola Golf Green, high-contrast typography & user-friendly UX
========================================================================== */
.navdrawer {
position: fixed;
top: 0;
left: 0;
width: 320px;
max-width: 85vw;
height: 100%;
height: 100dvh;
background: #244243A8;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--gf-paper, #FCFAF5);
z-index: 10000;
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.45);
transform: translateX(-100%);
visibility: hidden;
pointer-events: none;
transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s;
display: flex;
flex-direction: column;
overflow: hidden;
will-change: transform;
}
.navdrawer.open {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
}
.navscrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 9999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.26s ease, visibility 0.26s;
}
.navscrim.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.navdrawer-content {
display: flex;
flex-direction: column;
height: 100%;
background: #244243A8;
color: #FCFAF5;
position: relative;
overflow: hidden;
}
.navdrawer .navdrawer-content {
background: transparent;
}
/* Drawer Header */
.navdrawer-header {
padding: 16px 18px;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
gap: 12px;
}
.navdrawer-header .brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
min-width: 0;
}
.navdrawer-header .brand .logo {
width: 38px;
height: 38px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 0 2px rgba(233, 194, 106, 0.8), 0 2px 6px rgba(0,0,0,0.3);
flex-shrink: 0;
object-fit: cover;
}
.navdrawer-header .brand b {
font-size: 15px;
font-weight: 700;
color: #FCFAF5;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navdrawer-header .brand .sub {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--gf-brass-text, #E9C26A);
margin-top: 2px;
display: block;
}
.navdrawer-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #FCFAF5;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
line-height: 1;
cursor: pointer;
padding: 0;
transition: background 0.18s ease, transform 0.18s ease;
flex-shrink: 0;
}
.navdrawer-close:hover,
.navdrawer-close:active {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.06);
}
/* Drawer Scrollable Body */
.navdrawer-body {
padding: 14px 12px 28px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
}
.navdrawer-body::-webkit-scrollbar {
width: 4px;
}
.navdrawer-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.navdrawer-body a {
display: flex;
align-items: center;
padding: 11px 14px;
color: #FCFAF5 !important;
border-radius: 10px;
font-weight: 500;
font-size: 14.5px;
line-height: 1.3;
text-decoration: none;
min-height: 46px;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.navdrawer-body a:hover {
background: rgba(255, 255, 255, 0.12) !important;
color: var(--gf-brass-text, #E9C26A) !important;
transform: translateX(3px);
}
.navdrawer-body a:active {
transform: scale(0.98);
}
.navdrawer-body a.active,
.navdrawer-body a[aria-current="page"] {
background: rgba(233, 194, 106, 0.18) !important;
color: var(--gf-brass-text, #E9C26A) !important;
font-weight: 600;
box-shadow: inset 3px 0 0 var(--gf-brass-text, #E9C26A);
}
.navdrawer-body hr {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin: 10px 4px;
}
.navdrawer-body .services-header,
.navdrawer-body span[style*="uppercase"] {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: var(--gf-brass-text, #E9C26A) !important;
letter-spacing: 1.2px !important;
padding: 8px 14px 4px !important;
display: block;
}
.navdrawer-body a.signout-link,
.navdrawer-body a[href*="logout"] {
margin-top: 6px;
background: rgba(220, 38, 38, 0.14) !important;
border: 1px solid rgba(239, 68, 68, 0.3);
color: #FCA5A5 !important;
font-weight: 600;
}
.navdrawer-body a.signout-link:hover,
.navdrawer-body a[href*="logout"]:hover {
background: rgba(220, 38, 38, 0.28) !important;
color: #FFFFFF !important;
}
/* ---------- flight card ---------- */
.fl2 {
background: var(--gf-paper, #FCFAF5);
border: 2px solid var(--gf-border, #DAD3C1);
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 14px;
}
.fl2.sel {
border-color: var(--gf-primary-400, #2A5240);
box-shadow: 0 0 0 3px rgba(var(--gf-shadow-rgb, 18,38,29),.13);
}
.fl2 .fh2 {
display: flex;
align-items: center;
gap: 13px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.fl2 .fh2 b {
font-size: 1.16rem;
font-variant-numeric: tabular-nums;
color: var(--gf-primary-600, #12261D);
}
.fl2 .fh2 .rt {
margin-left: auto;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.who2 {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.who2 > span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .95rem;
padding: 7px 14px 7px 8px;
background: var(--gf-surface, #F6F3EC);
border: 2px solid var(--gf-border, #DAD3C1);
border-radius: 999px;
}
.who2 > span i {
width: 30px;
height: 30px;
border-radius: 50%;
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-style: normal;
font-size: .9rem;
font-weight: 700;
background: var(--gf-primary-050, #E9EEE6);
color: var(--gf-primary-600, #12261D);
border: 2px solid var(--gf-primary-300, #38684F);
}
.who2 > span.free {
border-style: dashed;
color: var(--gf-muted, #494840);
}
.who2 > span.free i {
background: var(--gf-paper, #FCFAF5);
border-style: dashed;
border-color: var(--gf-border-strong, #C3B99F);
color: var(--gf-muted, #494840);
}
.who2 > span.you {
background: var(--gf-primary-050, #E9EEE6);
border-color: var(--gf-primary-400, #2A5240);
font-weight: 700;
color: var(--gf-primary-600, #12261D);
}
/* ========================================================
MODERN WHO'S PLAYING FLIGHT GRID & MEMBER CHIPS
======================================================== */
.who2.wm-flight-grid {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 14px 0 16px !important;
width: 100% !important;
}
/* Tournament Desktop View: 3 persons in a row in flight-body */
#flight-body .who2.wm-flight-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px 10px !important;
margin: 14px 0 16px !important;
width: 100% !important;
}
#flight-body .wm-member-chip,
#wm-body .wm-member-chip {
height: 100% !important;
min-height: 64px !important;
padding: 9px 11px 9px 10px !important;
gap: 9px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
#flight-body .wm-name-row,
#wm-body .wm-name-row {
flex-wrap: nowrap !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
}
#flight-body .wm-member-name,
#wm-body .wm-member-name {
font-size: 0.88rem !important;
line-height: 1.25 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
#flight-body .wm-member-no,
#wm-body .wm-member-no {
font-size: 0.75rem !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
#flight-body .wm-btn-occupy,
#wm-body .wm-btn-occupy {
font-size: 0.72rem !important;
padding: 3px 8px !important;
border-radius: 6px !important;
flex: none !important;
}
#flight-body .wm-pill-you,
#flight-body .wm-pill-yourspot,
#wm-body .wm-pill-you,
#wm-body .wm-pill-yourspot {
font-size: 0.65rem !important;
padding: 1px 6px !important;
flex: none !important;
white-space: nowrap !important;
}
#flight-body .wm-tap-hint,
#wm-body .wm-tap-hint {
font-size: 0.74rem !important;
white-space: nowrap !important;
}
@media (max-width: 860px) {
#flight-body .who2.wm-flight-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 580px) {
#flight-body .who2.wm-flight-grid {
grid-template-columns: 1fr !important;
}
}
/* Base Card / Chip Structure */
/* Base Card / Chip Structure */
.wm-member-chip {
display: flex !important;
align-items: center !important;
gap: 11px !important;
padding: 10px 14px 10px 12px !important;
min-height: 64px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background: #FCFAF5 !important;
border: 1.5px solid #D8D2C2 !important;
border-radius: 14px !important;
box-shadow: 0 2px 6px rgba(18, 38, 29, 0.04) !important;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
position: relative !important;
text-align: left !important;
user-select: none !important;
overflow: hidden !important;
}
/* Left Group: Slot Number + Avatar */
.wm-chip-left {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: none !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.wm-slot-num {
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-style: normal !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
background: #E8EDE5 !important;
color: #1E3B2C !important;
border: 1px solid #BAC9B6 !important;
flex: none !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
transition: all 0.2s ease !important;
}
.wm-slot-num.active {
background: #1E3B2C !important;
color: #FCFAF5 !important;
border-color: #D4AF37 !important;
}
.wm-avatar-wrap {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
flex: none !important;
position: relative !important;
box-sizing: border-box !important;
}
.wm-avatar {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
border: 2px solid #FFFFFF !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14) !important;
background: #FFFFFF !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
}
.wm-avatar-placeholder {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
flex: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #F1ECE1 !important;
color: #8C8270 !important;
border: 1.5px dashed #C3B99F !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
}
/* Info Column */
.wm-member-info {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.wm-name-row {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: nowrap !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.wm-member-name {
font-size: 0.92rem !important;
font-weight: 700 !important;
color: #12261D !important;
line-height: 1.25 !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.wm-member-no {
font-size: 0.77rem !important;
font-weight: 500 !important;
color: #636158 !important;
line-height: 1.2 !important;
margin-top: 3px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.wm-tap-hint {
color: #2F6A48 !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
}
/* Pill Badges */
.wm-pill-you {
font-size: 0.68rem !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
padding: 2px 8px !important;
border-radius: 999px !important;
background: #DCFCE7 !important;
color: #15803D !important;
border: 1px solid #86EFAC !important;
line-height: 1.3 !important;
flex: none !important;
display: inline-block !important;
white-space: nowrap !important;
}
.wm-pill-yourspot {
font-size: 0.68rem !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
padding: 2px 8px !important;
border-radius: 999px !important;
background: #1E3B2C !important;
color: #FCFAF5 !important;
border: 1px solid #D4AF37 !important;
line-height: 1.3 !important;
flex: none !important;
display: inline-block !important;
white-space: nowrap !important;
}
.wm-pill-booked {
font-size: 0.68rem !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
padding: 2px 8px !important;
border-radius: 999px !important;
background: #EFECE4 !important;
color: #555248 !important;
border: 1px solid #D1CAC0 !important;
line-height: 1.3 !important;
flex: none !important;
display: inline-block !important;
white-space: nowrap !important;
}
/* Action Area on Free / Booked / Occupied Chips */
.wm-chip-action {
flex: none !important;
margin-left: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
background: transparent !important;
border: none !important;
padding: 0 0 0 6px !important;
margin: 0 0 0 auto !important;
}
.wm-btn-occupy {
font-size: 0.76rem !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-radius: 8px !important;
background: #EBF5EE !important;
color: #1E3B2C !important;
border: 1px solid #A8CDB6 !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
display: inline-block !important;
line-height: 1.3 !important;
}
.wm-check-icon {
width: 26px !important;
height: 26px !important;
border-radius: 50% !important;
background: #1E3B2C !important;
color: #FCFAF5 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1.5px solid #D4AF37 !important;
}
/* Booked & You State */
.wm-member-chip.wm-chip-booked {
background: #FCFAF5 !important;
border-color: #D8D2C2 !important;
}
.wm-member-chip.wm-chip-booked.you {
background: #F0F7F2 !important;
border-color: #2A5240 !important;
box-shadow: 0 2px 8px rgba(42, 82, 64, 0.1) !important;
}
/* Free Spot Styles & Hover */
.wm-member-chip.wm-chip-free {
border-style: dashed !important;
border-color: #C3B99F !important;
background: #FFFFFF !important;
cursor: pointer !important;
}
.wm-member-chip.wm-chip-free:hover,
.wm-member-chip.wm-chip-free:focus-visible {
border-color: #2A5240 !important;
border-style: solid !important;
background: #F4FAF5 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(42, 82, 64, 0.14) !important;
}
.wm-member-chip.wm-chip-free:hover .wm-avatar-placeholder {
background: #E5EFE7 !important;
color: #1E3B2C !important;
border-color: #2A5240 !important;
border-style: solid !important;
}
.wm-member-chip.wm-chip-free:hover .wm-slot-num {
background: #2A5240 !important;
color: #FCFAF5 !important;
border-color: #2A5240 !important;
}
.wm-member-chip.wm-chip-free:hover .wm-btn-occupy {
background: #2A5240 !important;
color: #FCFAF5 !important;
border-color: #2A5240 !important;
box-shadow: 0 2px 6px rgba(42, 82, 64, 0.28) !important;
}
.wm-member-chip.wm-chip-free:active {
transform: scale(0.98) !important;
}
/* Occupied State */
.wm-member-chip.occupied {
border-style: solid !important;
border-color: #2F6A48 !important;
background: #EAF5ED !important;
box-shadow: 0 0 0 3px rgba(47, 106, 72, 0.22), 0 6px 16px rgba(18, 38, 29, 0.12) !important;
animation: spotOccupied 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes spotOccupied {
0% { transform: scale(0.94); opacity: .75; }
50% { transform: scale(1.03); }
100% { transform: scale(1); opacity: 1; }
}
.btn-glow {
box-shadow: 0 0 0 4px rgba(212, 175, 55, .4), 0 4px 14px rgba(30, 59, 44, .25) !important;
animation: btnPulse 1.5s infinite alternate ease-in-out;
}
@keyframes btnPulse {
0% { transform: scale(1); }
100% { transform: scale(1.02); }
}
/* Responsive adjustments for Who's Playing modal and chips */
@media (max-width: 640px) {
.modal-wrap {
padding: 12px 10px !important;
}
.modal-card {
max-width: 100% !important;
width: 100% !important;
border-radius: 14px !important;
overflow-x: hidden !important;
}
.modal-card .done {
padding: 28px 14px 20px !important;
}
.modal-close {
top: 8px !important;
right: 8px !important;
width: 36px !important;
height: 36px !important;
font-size: 1.4rem !important;
}
#wm-title {
font-size: 1.32rem !important;
line-height: 1.25 !important;
padding-right: 32px !important;
}
#wm-sub {
font-size: 0.84rem !important;
margin: -2px 0 14px !important;
}
/* Flight card inside modal */
#wm-body .fl2,
.fl2 {
padding: 14px 12px !important;
border-radius: 12px !important;
margin-bottom: 12px !important;
}
#wm-body .fl2 .fh2,
.fl2 .fh2 {
gap: 8px !important;
margin-bottom: 10px !important;
}
#wm-body .fl2 .fh2 b,
.fl2 .fh2 b {
font-size: 1.02rem !important;
}
#wm-body .fl2 .fh2 .rt,
.fl2 .fh2 .rt {
gap: 6px !important;
}
#wm-body .fl2 .fh2 .rt .pill,
.fl2 .fh2 .rt .pill {
padding: 3px 8px !important;
font-size: 0.74rem !important;
}
/* Modal footer buttons responsiveness */
#wm-dbtns,
.dbtns {
margin-top: 14px !important;
gap: 8px !important;
width: 100% !important;
}
#wm-dbtns .btn,
.dbtns .btn {
min-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 14px !important;
font-size: 0.88rem !important;
white-space: normal !important;
word-break: break-word !important;
text-align: center !important;
}
}
/* ---------- action row ---------- */
.act {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.act .btn {
flex: none;
min-width: 230px;
}
.act .mt {
margin-left: auto;
}
@media (max-width:620px) {
.act .btn { min-width: 100%; }
.act .mt { margin-left: 0; }
}
/* ---------- meter ---------- */
.mt {
display: flex;
align-items: center;
gap: 11px;
font-size: .94rem;
color: var(--gf-muted, #494840);
}
.mt .bar {
width: 104px;
height: 11px;
border-radius: 99px;
background: var(--gf-surface, #F6F3EC);
border: 2px solid var(--gf-border-strong, #C3B99F);
overflow: hidden;
flex: none;
}
.mt .bar i {
display: block;
height: 100%;
background: var(--gf-primary-300, #38684F);
}
.mt .bar.hot i {
background: var(--gf-warning, #6B4808);
}
/* ---------- empty state ---------- */
.empty {
text-align: center;
padding: 56px 24px;
}
.empty i {
width: 82px;
height: 82px;
border-radius: 50%;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg,var(--gf-paper, #FCFAF5) 0%,var(--gf-primary-050, #E9EEE6) 100%);
color: var(--gf-primary-600, #12261D);
border: 2px solid var(--gf-primary-300, #38684F);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 2px 5px rgba(0,0,0,.10);
}
.empty b {
display: block;
font-size: 1.22rem;
margin-bottom: 7px;
}
.empty p {
color: var(--gf-text, #494840);
max-width: 460px;
margin: 0 auto 20px;
}
/* ---------- tee-time booking design helpers ---------- */
.herodiv {
height: 1px;
background: var(--gf-border, #E3DDCC);
margin: 12px 0 16px;
width: 100%;
}
.slot .av.ok { color: var(--gf-primary-500, #1E3B2C); }
.slot .av.last { color: #B25E00; font-weight: 700; }
.slot .av.gone { color: var(--gf-muted, #736F62); }
.slot.sel .av { color: rgba(255, 255, 255, 0.92) !important; }
/* ---------- tournament portal helpers ---------- */
.calday.has-tourn {
position: relative;
}
.calday.has-tourn:not(:disabled) {
font-weight: 700;
color: var(--gf-primary-700, #0C1A13);
background: #FFFDF8;
border-color: var(--gf-brass, #A9822F);
}
.calday.has-tourn:not(:disabled):hover {
background: var(--gf-primary-050, #E9EEE6);
border-color: var(--gf-primary-500, #1E3B2C);
}
.calday.has-tourn:not(:disabled):after {
content: "";
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gf-brass, #A9822F);
}
.calday.has-tourn.sel:after {
background: #FCFAF5;
}
@keyframes kgcSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ============================================================================
KGC ENHANCED DATA TABLES & RESPONSIVE DESIGN (GAMES & BILLS)
========================================================================== */
.table-card {
background: var(--gf-paper, #FCFAF5);
border: 1.5px solid var(--gf-border, #DAD3C1);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(18, 38, 29, 0.04);
margin-bottom: 24px;
}
.table-card .tw {
border-radius: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.kgc-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.95rem;
}
table.kgc-table th {
background: #F4F6F1;
color: #3B4B40;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 14px 18px;
border-bottom: 1.5px solid var(--gf-border, #DAD3C1);
white-space: nowrap;
text-align: left;
}
table.kgc-table td {
padding: 15px 18px;
border-bottom: 1px solid #ECE7DC;
vertical-align: middle;
color: var(--gf-ink, #1F2421);
}
table.kgc-table th.c,
table.kgc-table td.c {
text-align: center;
}
table.kgc-table th.n,
table.kgc-table td.n {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
table.kgc-table th.d,
table.kgc-table td.d {
white-space: nowrap;
}
table.kgc-table th.a,
table.kgc-table td.a {
text-align: right;
white-space: nowrap;
}
table.kgc-table tbody tr {
transition: background-color 0.15s ease;
}
table.kgc-table tbody tr:hover {
background-color: #FAF8F2;
}
table.kgc-table tr:last-child td {
border-bottom: 0;
}
/* Reg badge */
.badge-reg {
display: inline-block;
font-weight: 700;
font-size: 0.88rem;
font-variant-numeric: tabular-nums;
color: var(--gf-primary-700, #0C1A13);
background: #EFECE3;
padding: 3px 8px;
border-radius: 6px;
border: 1px solid #DFD9CC;
}
/* Chips in table cells */
.tag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
color: var(--gf-muted, #55534A);
background: #F2EFE8;
border: 1px solid #E2DDCF;
padding: 2px 8px;
border-radius: 6px;
white-space: nowrap;
}
.tag-tourn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.82rem;
font-weight: 600;
color: #144A32;
background: #EBF4EE;
border: 1px solid #C4DFC9;
padding: 3px 10px;
border-radius: 6px;
}
/* Status pills */
.pill.tourn {
background: #EBF4EE;
color: #144A32;
border: 1px solid #C4DFC9;
font-weight: 700;
}
.pill.due {
background: #FEF2F2;
color: #991B1B;
border: 1px solid #FECACA;
font-weight: 700;
}
.pill.ok {
background: #EDF7EE;
color: #166534;
border: 1px solid #BBF7D0;
font-weight: 700;
}
.pill.off {
background: #F3F1EC;
color: #55534A;
border: 1px solid #E0DCD3;
font-weight: 600;
}
.pill.cancel {
background: #FEF2F2;
color: #991B1B;
border: 1px solid #FECACA;
font-weight: 600;
}
/* Action buttons in tables */
.btn-tbl {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border-radius: 7px;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none !important;
transition: all 0.15s ease;
white-space: nowrap;
line-height: 1.3;
}
.btn-tbl-primary {
background: #1E3B2C;
color: #FFFFFF !important;
border: 1px solid #142A1F;
}
.btn-tbl-primary:hover {
background: #274C39;
box-shadow: 0 2px 6px rgba(18, 38, 29, 0.2);
}
.btn-tbl-sec {
background: #F4F1EA;
color: var(--gf-ink, #1F2421) !important;
border: 1px solid var(--gf-border, #DAD3C1);
}
.btn-tbl-sec:hover {
background: #EBE6DA;
border-color: #CFC7B4;
}
.btn-tbl-green {
background: #EBF4EE;
color: #144A32 !important;
border: 1px solid #C4DFC9;
}
.btn-tbl-green:hover {
background: #DCEFE3;
border-color: #AFD4B7;
}
.btn-tbl-pay {
background: #1E3B2C;
color: #FFFFFF !important;
border: 1px solid #142A1F;
padding: 7px 14px;
font-weight: 600;
}
.btn-tbl-pay:hover {
background: #274C39;
box-shadow: 0 2px 8px rgba(18, 38, 29, 0.25);
}
/* Responsive table styling on mobile */
@media (max-width: 860px) {
table.kgc-table,
table.kgc-table tbody,
table.kgc-table tr,
table.kgc-table td {
display: block;
width: 100%;
box-sizing: border-box;
}
table.kgc-table thead {
display: none;
}
table.kgc-table tr {
border-bottom: 1.5px solid var(--gf-border, #DAD3C1);
padding: 12px 14px;
background: #FFFEFB;
}
table.kgc-table tr:nth-child(even) {
background: #FAF7F0;
}
table.kgc-table tr:last-child {
border-bottom: 0;
}
table.kgc-table td {
border-bottom: 0;
padding: 6px 4px;
text-align: left !important;
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
table.kgc-table td:before {
content: attr(data-th);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--gf-muted, #55534A);
display: inline-block;
min-width: 90px;
flex-shrink: 0;
}
table.kgc-table td.a {
justify-content: flex-end;
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed var(--gf-border, #DAD3C1);
}
table.kgc-table td.a:before {
display: none;
}
table.kgc-table td:empty {
display: none;
}
}
/* ============================================================================
KGC DATA TABLE PAGINATION (GAMES & BILLS) - ENHANCED LUXURY CLUB DESIGN
========================================================================== */
.kgc-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 16px 24px;
background: linear-gradient(180deg, #FFFFFF 0%, #F9F7F2 100%);
border-top: 1.5px solid var(--gf-border, #DAD3C1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
font-size: 0.88rem;
color: var(--gf-text, #494840);
box-sizing: border-box;
}
.kgc-table-pagination .pg-info {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.kgc-table-pagination .pg-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: #EFEBE0;
color: var(--gf-primary-700, #0C1A13);
padding: 4px 11px;
border-radius: 20px;
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.3px;
border: 1px solid #DFD8C7;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
}
.kgc-table-pagination .pg-badge .pg-num {
font-weight: 700;
color: var(--gf-primary-500, #1E3B2C);
}
.kgc-table-pagination .pg-text {
font-size: 0.86rem;
color: var(--gf-muted, #55534A);
font-variant-numeric: tabular-nums;
}
.kgc-table-pagination .pg-text strong {
color: var(--gf-ink, #242320);
font-weight: 700;
}
.kgc-table-pagination .pg-nav {
display: inline-flex;
align-items: center;
gap: 6px;
user-select: none;
}
.kgc-table-pagination .pg-pages {
display: inline-flex;
align-items: center;
gap: 5px;
}
.kgc-table-pagination .pg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 10px;
border-radius: 9px;
border: 1.5px solid #DAD3C1;
background: #FFFFFF;
color: var(--gf-ink, #242320);
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
line-height: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.kgc-table-pagination .pg-btn-arrow {
gap: 6px;
padding: 0 13px;
font-size: 0.82rem;
font-weight: 600;
}
.kgc-table-pagination .pg-btn-arrow svg {
width: 15px;
height: 15px;
flex-shrink: 0;
transition: transform 0.15s ease;
}
.kgc-table-pagination .pg-btn-prev:hover:not(.disabled) svg {
transform: translateX(-2px);
}
.kgc-table-pagination .pg-btn-next:hover:not(.disabled) svg {
transform: translateX(2px);
}
.kgc-table-pagination .pg-btn:hover:not(.disabled):not(.active) {
background: #F4EFE6;
border-color: #BDB29A;
color: #0C1A13;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(18, 38, 29, 0.08);
}
.kgc-table-pagination .pg-btn:active:not(.disabled):not(.active) {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.kgc-table-pagination .pg-btn.active {
background: linear-gradient(145deg, #1E3B2C 0%, #12261D 100%) !important;
color: #FFFFFF !important;
border-color: #0C1A13 !important;
cursor: default;
font-weight: 700;
box-shadow: 0 3px 8px rgba(18, 38, 29, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
transform: none;
}
.kgc-table-pagination .pg-btn.disabled {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
background: #F7F5EE;
border-color: #E2DDD2;
color: #8F8B80;
box-shadow: none;
}
.kgc-table-pagination .pg-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 38px;
color: var(--gf-muted, #7E7B70);
font-weight: 700;
letter-spacing: 2px;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.kgc-table-pagination {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 14px 18px;
}
.kgc-table-pagination .pg-info {
justify-content: space-between;
width: 100%;
}
.kgc-table-pagination .pg-nav {
justify-content: center;
flex-wrap: wrap;
gap: 5px;
width: 100%;
}
.kgc-table-pagination .pg-pages {
gap: 4px;
}
.kgc-table-pagination .pg-btn {
min-width: 36px;
height: 36px;
padding: 0 8px;
font-size: 0.82rem;
}
}
@media (max-width: 480px) {
.kgc-table-pagination {
padding: 12px 14px;
gap: 12px;
}
.kgc-table-pagination .pg-info {
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.kgc-table-pagination .pg-btn-arrow span {
display: none; /* Show icon only for compact mobile display */
}
.kgc-table-pagination .pg-btn-arrow {
padding: 0 10px;
min-width: 36px;
}
}
/* ==========================================================================
KGC Golf Academy & eLearning Courses Portal Styles
========================================================================== */
.kgc-academy-stats-banner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
background: var(--gf-paper, #FCFAF5);
border: 1.5px solid var(--gf-border, #DAD3C1);
border-radius: 14px;
padding: 14px 20px;
margin-top: 24px;
margin-bottom: 22px;
box-shadow: 0 4px 18px rgba(18, 38, 29, 0.03);
}
.kgc-academy-stats-banner .stat-pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.86rem;
color: var(--gf-primary-700, #1E3B2C);
font-weight: 500;
}
.kgc-academy-stats-banner .stat-pill svg {
color: var(--gf-accent-gold, #D4AF37);
flex-shrink: 0;
}
.kgc-academy-toolbar {
margin-bottom: 24px;
}
.kgc-search-box {
position: relative;
display: flex;
align-items: center;
background: #ffffff;
border: 1.5px solid var(--gf-border, #DAD3C1);
border-radius: 12px;
padding: 10px 16px;
box-shadow: 0 2px 8px rgba(18, 38, 29, 0.03);
transition: border-color 0.2s, box-shadow 0.2s;
}
.kgc-search-box:focus-within {
border-color: var(--gf-primary-600, #1E3B2C);
box-shadow: 0 0 0 3px rgba(30, 59, 44, 0.12);
}
.kgc-search-box .search-icon {
color: var(--gf-muted, #7A786F);
margin-right: 10px;
flex-shrink: 0;
}
.kgc-search-box input {
width: 100%;
border: none;
outline: none;
font-size: 0.92rem;
font-family: inherit;
color: var(--gf-primary-700, #1E3B2C);
background: transparent;
}
.kgc-search-box input::placeholder {
color: var(--gf-muted, #7A786F);
}
#academy-search-clear {
background: none;
border: none;
font-size: 20px;
color: var(--gf-muted, #7A786F);
cursor: pointer;
padding: 0 6px;
line-height: 1;
}
.kgc-cat-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.cat-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 20px;
border: 1.5px solid var(--gf-border, #DAD3C1);
background: var(--gf-paper, #FCFAF5);
color: var(--gf-primary-700, #1E3B2C);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.cat-chip:hover {
background: #F4F2EA;
border-color: var(--gf-primary-600, #1E3B2C);
}
.cat-chip.active {
background: var(--gf-primary-700, #1E3B2C);
color: #FCFAF5;
border-color: var(--gf-primary-700, #1E3B2C);
box-shadow: 0 2px 8px rgba(30, 59, 44, 0.2);
}
.cat-chip .chip-count {
font-size: 0.72rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.08);
}
.cat-chip.active .chip-count {
background: rgba(255, 255, 255, 0.25);
color: #FCFAF5;
}
.kgc-empty-state {
text-align: center;
padding: 48px 20px;
background: var(--gf-paper, #FCFAF5);
border: 1.5px dashed var(--gf-border, #DAD3C1);
border-radius: 16px;
margin: 20px 0;
}
.kgc-empty-state h3 {
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.25rem;
color: var(--gf-primary-700, #1E3B2C);
margin: 0 0 8px 0;
}
.kgc-empty-state p {
font-size: 0.88rem;
color: var(--gf-muted, #7A786F);
max-width: 440px;
margin: 0 auto 16px auto;
}
/* Courses Grid & Cards */
.kgc-courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 24px;
}
.kgc-course-card {
background: #ffffff;
border: 1.5px solid var(--gf-border, #DAD3C1);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4px 16px rgba(18, 38, 29, 0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kgc-course-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(18, 38, 29, 0.09);
}
.course-card-top {
padding: 18px 20px;
min-height: 110px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #FCFAF5;
position: relative;
}
.course-badges {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.badge-pill {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 6px;
}
.badge-pill.gold {
background: var(--gf-accent-gold, #D4AF37);
color: #382B02;
}
.badge-pill.green {
background: #276749;
color: #ffffff;
}
.badge-level {
font-size: 0.72rem;
font-weight: 600;
padding: 3px 8px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.2);
color: #FCFAF5;
}
.course-header-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
}
.cat-tag {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--gf-accent-gold, #D4AF37);
}
.card-play-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.card-play-icon:hover {
background: rgba(255, 255, 255, 0.4);
transform: scale(1.08);
}
.course-card-body {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.course-title {
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.22rem;
font-weight: 700;
color: var(--gf-primary-700, #1E3B2C);
line-height: 1.35;
margin: 0 0 10px 0;
cursor: pointer;
transition: color 0.15s ease;
}
.course-title:hover {
color: var(--gf-accent-gold, #D4AF37);
}
.course-desc {
font-size: 0.86rem;
color: var(--gf-muted, #55534A);
line-height: 1.55;
margin: 0 0 16px 0;
flex: 1;
}
.course-meta-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-size: 0.78rem;
color: var(--gf-muted, #7A786F);
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--gf-border, #DAD3C1);
}
.course-meta-row .meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.course-meta-row .meta-item svg {
color: var(--gf-accent-gold, #D4AF37);
flex-shrink: 0;
}
.course-meta-row .instructor-item {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.course-progress-wrap {
margin-bottom: 14px;
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.74rem;
font-weight: 600;
color: var(--gf-muted, #55534A);
margin-bottom: 5px;
}
.progress-track {
height: 6px;
background: #EBE7DC;
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #1E3B2C 0%, #D4AF37 100%);
border-radius: 3px;
transition: width 0.3s ease;
}
.course-syllabus-preview {
margin-bottom: 16px;
}
.syllabus-toggle-btn {
background: none;
border: none;
padding: 0;
font-size: 0.82rem;
font-weight: 600;
color: var(--gf-primary-700, #1E3B2C);
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.syllabus-toggle-btn .chevron-icon {
transition: transform 0.2s ease;
}
.syllabus-list {
margin-top: 10px;
border-top: 1px solid var(--gf-border, #DAD3C1);
padding-top: 8px;
}
.syllabus-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease;
}
.syllabus-item:hover {
background: #F4F2EA;
}
.syllabus-item .les-num {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gf-primary-700, #1E3B2C);
color: #FCFAF5;
font-size: 0.72rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.syllabus-item .les-details {
flex: 1;
}
.syllabus-item .les-title {
font-size: 0.82rem;
font-weight: 600;
color: var(--gf-primary-700, #1E3B2C);
line-height: 1.35;
}
.syllabus-item .les-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.72rem;
color: var(--gf-muted, #7A786F);
margin-top: 2px;
}
.syllabus-item .les-action-hint {
color: var(--gf-accent-gold, #D4AF37);
font-weight: 600;
}
.course-actions {
margin-top: auto;
}
.btn-watch-course {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 18px;
background: var(--gf-primary-700, #1E3B2C);
color: #FCFAF5;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
box-shadow: 0 3px 8px rgba(30, 59, 44, 0.2);
}
.btn-watch-course:hover {
background: var(--gf-primary-600, #12261D);
transform: translateY(-1px);
}
/* Practice Banner */
.kgc-practice-banner {
margin-top: 44px;
margin-bottom: 24px;
background: linear-gradient(135deg, #1E3B2C 0%, #12261D 100%);
border-radius: 16px;
padding: 34px 32px;
color: #FCFAF5;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(18, 38, 29, 0.15);
}
.kgc-practice-banner .banner-sub {
color: var(--gf-accent-gold, #D4AF37);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 8px;
}
.kgc-practice-banner h2 {
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.48rem;
margin: 0 0 10px 0;
color: #FCFAF5;
}
.kgc-practice-banner p {
color: rgba(252, 250, 245, 0.88);
font-size: 0.92rem;
max-width: 680px;
line-height: 1.6;
margin: 0 0 24px 0;
}
.practice-features {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 26px;
}
.practice-features .feat {
display: flex;
flex-direction: column;
}
.practice-features .feat strong {
font-size: 0.95rem;
color: #FCFAF5;
}
.practice-features .feat span {
font-size: 0.8rem;
color: rgba(252, 250, 245, 0.72);
}
.banner-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn-outline-white {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(255, 255, 255, 0.4);
color: #FCFAF5;
background: transparent;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-outline-white:hover {
background: rgba(255, 255, 255, 0.14);
color: #FCFAF5;
border-color: #FCFAF5;
}
/* Tutorial Player Modal */
.tutorial-modal-scrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 9998;
}
.tutorial-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
overflow-y: auto;
}
.modal-inner {
background: var(--gf-paper, #FCFAF5);
border-radius: 16px;
max-width: 1060px;
width: 100%;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.modal-header {
background: var(--gf-primary-700, #1E3B2C);
color: #FCFAF5;
padding: 16px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(233, 194, 106, 0.25);
flex-shrink: 0;
}
.modal-course-label {
color: var(--gf-accent-gold, #D4AF37);
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
display: block;
}
.modal-header h2 {
margin: 4px 0 0 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.25rem;
color: #FCFAF5;
}
.modal-close-btn {
background: none;
border: none;
color: #FCFAF5;
font-size: 28px;
cursor: pointer;
line-height: 1;
padding: 0 6px;
transition: opacity 0.2s;
}
.modal-close-btn:hover {
opacity: 0.75;
}
.modal-body-layout {
display: grid;
grid-template-columns: 1.65fr 1fr;
flex: 1;
overflow-y: auto;
}
.video-stage-column {
padding: 20px;
background: #ffffff;
border-right: 1px solid var(--gf-border, #DAD3C1);
overflow-y: auto;
}
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
background: #000000;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-fallback {
position: absolute;
inset: 0;
background: #12261D;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
color: #FCFAF5;
}
.video-fallback svg {
color: var(--gf-accent-gold, #D4AF37);
margin-bottom: 12px;
}
.btn-play-external {
display: inline-block;
background: var(--gf-accent-gold, #D4AF37);
color: #12261D;
padding: 8px 16px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
margin-top: 12px;
}
.lesson-meta-card {
margin-top: 18px;
}
.lesson-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.current-lesson-num {
font-size: 0.76rem;
font-weight: 700;
color: var(--gf-accent-gold, #D4AF37);
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
background: var(--gf-primary-700, #1E3B2C);
padding: 3px 8px;
border-radius: 4px;
width: fit-content;
margin-bottom: 6px;
}
.current-lesson-title {
margin: 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.15rem;
color: var(--gf-primary-700, #1E3B2C);
line-height: 1.35;
}
.btn-mark-watched {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
border: 1.5px solid var(--gf-border, #DAD3C1);
background: var(--gf-paper, #FCFAF5);
color: var(--gf-muted, #55534A);
font-weight: 600;
font-size: 0.82rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-mark-watched:hover {
background: #F4F2EA;
}
.btn-mark-watched.completed {
background: #E6F4EA;
color: #137333;
border-color: #34A853;
}
.drill-card, .takeaway-card {
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 12px;
font-size: 0.86rem;
line-height: 1.55;
}
.drill-card {
background: #FCF9EE;
border: 1px solid #EAD8A0;
}
.drill-header, .takeaway-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 0.84rem;
color: var(--gf-primary-700, #1E3B2C);
}
.drill-card p, .takeaway-card p {
margin: 0;
color: #3B3931;
}
.takeaway-card {
background: #F0F7F2;
border: 1px solid #B8DAC3;
}
.lesson-nav-buttons {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--gf-border, #DAD3C1);
}
.btn-step-lesson {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid var(--gf-border, #DAD3C1);
background: var(--gf-paper, #FCFAF5);
color: var(--gf-primary-700, #1E3B2C);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-step-lesson:hover:not(:disabled) {
background: #F4F2EA;
border-color: var(--gf-primary-700, #1E3B2C);
}
/* Playlist Column */
.syllabus-playlist-column {
background: #F9F7F1;
padding: 18px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.playlist-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--gf-border, #DAD3C1);
flex-shrink: 0;
}
.playlist-header h3 {
margin: 0;
font-size: 0.95rem;
color: var(--gf-primary-700, #1E3B2C);
}
.playlist-count {
font-size: 0.78rem;
color: var(--gf-muted, #7A786F);
font-weight: 600;
}
.playlist-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.playlist-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
background: #ffffff;
border: 1px solid var(--gf-border, #DAD3C1);
transition: all 0.15s ease;
}
.playlist-item:hover {
border-color: var(--gf-primary-700, #1E3B2C);
background: #F4F7F2;
}
.playlist-item.active {
background: var(--gf-primary-700, #1E3B2C);
border-color: var(--gf-primary-700, #1E3B2C);
}
.playlist-left {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.playlist-num {
font-size: 0.78rem;
font-weight: 700;
color: var(--gf-muted, #7A786F);
width: 18px;
text-align: center;
flex-shrink: 0;
}
.playlist-item.active .playlist-num {
color: var(--gf-accent-gold, #D4AF37);
}
.playlist-title-wrap {
flex: 1;
}
.playlist-title {
font-size: 0.82rem;
font-weight: 600;
color: var(--gf-primary-700, #1E3B2C);
line-height: 1.35;
}
.playlist-item.active .playlist-title {
color: #FCFAF5;
}
.playlist-meta {
font-size: 0.72rem;
color: var(--gf-muted, #7A786F);
margin-top: 2px;
}
.playlist-item.active .playlist-meta {
color: var(--gf-accent-gold, #D4AF37);
}
.playlist-check {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--gf-border, #DAD3C1);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 8px;
}
.playlist-check.active {
border-color: #28A745;
background: #E6F4EA;
color: #28A745;
}
.playlist-item.active .playlist-check.active {
border-color: #34D399;
background: rgba(52, 211, 153, 0.2);
color: #34D399;
}
/* Mobile Responsiveness for Academy */
@media (max-width: 900px) {
.kgc-academy-stats-banner {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 16px;
}
.kgc-courses-grid {
grid-template-columns: 1fr;
}
.modal-body-layout {
grid-template-columns: 1fr;
}
.video-stage-column {
border-right: none;
border-bottom: 1px solid var(--gf-border, #DAD3C1);
padding: 14px;
}
.syllabus-playlist-column {
padding: 14px;
max-height: 240px;
}
.kgc-practice-banner {
padding: 24px 20px;
}
.kgc-practice-banner h2 {
font-size: 1.35rem;
}
.practice-features {
gap: 16px;
}
}
/* ==========================================================================
KGC FIRST-TIME MEMBER WELCOME TUTORIAL MODAL
========================================================================== */
.kgc-welcome-scrim {
position: fixed;
inset: 0;
background: rgba(14, 27, 20, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 99998;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.kgc-welcome-scrim.open {
opacity: 1;
pointer-events: auto;
}
.kgc-welcome-wrap {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
pointer-events: none;
opacity: 0;
transform: translateY(16px) scale(0.97);
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.kgc-welcome-wrap.open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.kgc-welcome-card {
max-width: 580px;
width: 100%;
background: #FFFFFF;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.2);
display: flex;
flex-direction: column;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.kgc-welcome-hero {
background: linear-gradient(135deg, #14281E 0%, #1E3B2C 55%, #29543E 100%);
color: #FCFAF5;
padding: 32px 32px 26px;
position: relative;
border-bottom: 2px solid rgba(212, 175, 55, 0.35);
}
.kgc-welcome-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #FCFAF5;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
}
.kgc-welcome-close:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.06);
}
.kgc-welcome-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(212, 175, 55, 0.18);
border: 1px solid rgba(212, 175, 55, 0.4);
color: #F1D789;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.9px;
margin-bottom: 12px;
}
.kgc-welcome-hero h2 {
font-size: 1.55rem;
font-weight: 700;
color: #FCFAF5;
margin: 0 0 10px;
line-height: 1.25;
}
.kgc-welcome-hero p {
font-size: 0.94rem;
color: #D2DBCF;
margin: 0;
line-height: 1.55;
}
.kgc-welcome-body {
padding: 24px 32px 28px;
background: #FCFAF5;
}
.kgc-welcome-highlights {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.kgc-welcome-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: #FFFFFF;
border: 1px solid #ECE7DC;
border-radius: 12px;
transition: all 0.2s ease;
}
.kgc-welcome-item:hover {
border-color: #D4AF37;
box-shadow: 0 4px 12px rgba(30, 59, 44, 0.06);
transform: translateY(-1px);
}
.kgc-welcome-item-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: #EDF5F0;
color: #1E3B2C;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kgc-welcome-item-text b {
display: block;
font-size: 0.9rem;
font-weight: 600;
color: #1E3B2C;
margin-bottom: 0;
line-height: 1.35;
}
.kgc-welcome-item-text span {
display: none;
}
.kgc-welcome-actions {
display: flex;
gap: 12px;
align-items: center;
justify-content: flex-end;
}
.kgc-welcome-btn-primary {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #1A3628 0%, #27523E 55%, #1B3C2D 100%);
color: #FCFAF5;
border: 1px solid #162E22;
border-radius: 10px;
padding: 12px 22px;
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(30, 59, 44, 0.25);
text-decoration: none;
animation: welcomeBtnPulse 2.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
z-index: 1;
}
.kgc-welcome-btn-primary:hover {
background: linear-gradient(135deg, #13281D 0%, #1E4231 55%, #142F23 100%);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(30, 59, 44, 0.38);
filter: brightness(1.06);
}
.kgc-welcome-btn-primary:active {
transform: translateY(1px) scale(0.985);
}
.kgc-welcome-btn-primary svg {
color: #E5C365;
flex-shrink: 0;
animation: welcomeIconTick 3.2s infinite ease-in-out;
}
/* Eye-catching shimmer light sweep across Watch Instruction Videos button */
.kgc-welcome-btn-primary::after {
content: '';
position: absolute;
top: -60%;
left: -80%;
width: 45%;
height: 220%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.32) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(25deg);
animation: welcomeBtnShimmer 3.5s infinite ease-in-out;
pointer-events: none;
}
.kgc-welcome-btn-secondary {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background: #FCFAF5;
color: #4A4740;
border: 1px solid #D5CEBD;
border-radius: 10px;
padding: 12px 20px;
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
animation: welcomeSecondaryBreathe 3s infinite ease-in-out;
}
.kgc-welcome-btn-secondary:hover {
background: #F1ECE0;
color: #1E3B2C;
border-color: #D4AF37;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}
.kgc-welcome-btn-secondary:active {
transform: translateY(1px);
}
@keyframes welcomeBtnPulse {
0% {
box-shadow: 0 0 0 0 rgba(39, 82, 62, 0.55), 0 4px 14px rgba(26, 54, 40, 0.25);
}
65% {
box-shadow: 0 0 0 10px rgba(39, 82, 62, 0), 0 6px 18px rgba(26, 54, 40, 0.35);
}
100% {
box-shadow: 0 0 0 0 rgba(39, 82, 62, 0), 0 4px 14px rgba(26, 54, 40, 0.25);
}
}
@keyframes welcomeBtnShimmer {
0%, 30% {
transform: translateX(-150%) rotate(25deg);
}
65%, 100% {
transform: translateX(450%) rotate(25deg);
}
}
@keyframes welcomeIconTick {
0%, 75%, 100% {
transform: scale(1);
}
80% {
transform: scale(1.25) translateX(1px);
}
88% {
transform: scale(1.18) translateX(2px);
}
94% {
transform: scale(1.05) translateX(0);
}
}
@keyframes welcomeSecondaryBreathe {
0%, 100% {
border-color: #D5CEBD;
color: #4A4740;
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
}
50% {
border-color: #D4AF37;
color: #1E3B2C;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
}
@media (max-width: 600px) {
.kgc-welcome-wrap {
padding: 12px;
}
.kgc-welcome-card {
border-radius: 16px;
max-height: calc(100vh - 24px);
overflow-y: auto;
}
.kgc-welcome-hero {
padding: 16px 16px 12px;
}
.kgc-welcome-close {
top: 10px;
right: 10px;
width: 28px;
height: 28px;
font-size: 18px;
}
.kgc-welcome-badge {
padding: 2px 8px;
font-size: 0.65rem;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.kgc-welcome-badge svg {
width: 12px;
height: 12px;
}
.kgc-welcome-hero h2 {
font-size: 1.15rem;
margin: 0 0 4px;
line-height: 1.25;
}
.kgc-welcome-hero p {
font-size: 0.8rem;
line-height: 1.35;
}
.kgc-welcome-body {
padding: 12px 14px 14px;
}
.kgc-welcome-highlights {
gap: 8px;
margin-bottom: 12px;
}
.kgc-welcome-item {
padding: 8px 10px;
gap: 10px;
border-radius: 9px;
}
.kgc-welcome-item-icon {
width: 28px;
height: 28px;
border-radius: 6px;
}
.kgc-welcome-item-icon svg {
width: 15px;
height: 15px;
}
.kgc-welcome-item-text b {
font-size: 0.82rem;
line-height: 1.25;
}
.kgc-welcome-actions {
flex-direction: row;
gap: 8px;
}
.kgc-welcome-btn-secondary {
flex: 0 0 auto;
padding: 9px 12px;
font-size: 0.8rem;
white-space: nowrap;
}
.kgc-welcome-btn-primary {
flex: 1;
padding: 9px 10px;
font-size: 0.8rem;
white-space: nowrap;
letter-spacing: -0.2px;
}
.kgc-welcome-btn-primary svg {
width: 15px;
height: 15px;
}
}
@media (max-width: 360px) {
.kgc-welcome-actions {
flex-direction: column-reverse;
gap: 6px;
}
.kgc-welcome-btn-primary,
.kgc-welcome-btn-secondary {
width: 100%;
text-align: center;
}
}
/* ==========================================================================
KGC TEE-TIME BOOKING: SEE SLOTS BUTTON & TIME PREFERENCE SWITCHER
========================================================================== */
/* --- Picksbar Action Button: See Slots --- */
.picksbar > .btn-see-slots,
.btn-see-slots {
position: relative;
overflow: hidden;
border: none !important;
background: linear-gradient(135deg, #1A3628 0%, #27523E 50%, #1B3C2D 100%) !important;
color: #FCFAF5 !important;
font-family: inherit;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
cursor: pointer;
outline: none;
min-width: 140px;
flex: 1.15 1 0;
transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
animation: seeSlotsPulse 2.6s infinite cubic-bezier(0.4, 0, 0.6, 1);
box-shadow: 0 4px 14px rgba(26, 54, 40, 0.28);
z-index: 1;
}
.picksbar > .btn-see-slots:hover,
.btn-see-slots:hover {
background: linear-gradient(135deg, #12261C 0%, #1E4432 50%, #153224 100%) !important;
color: #FCFAF5 !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(26, 54, 40, 0.42);
filter: brightness(1.08);
}
.picksbar > .btn-see-slots:active,
.btn-see-slots:active {
transform: translateY(1px) scale(0.985);
box-shadow: 0 2px 8px rgba(26, 54, 40, 0.3);
}
.btn-see-slots-content {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.3px;
color: #FCFAF5;
white-space: nowrap;
}
.btn-see-slots-icon {
color: #E5C365; /* KGC Heritage Gold */
flex-shrink: 0;
animation: seeSlotsIconTick 3.2s infinite ease-in-out;
}
/* Attention shimmer sweep across the button */
.btn-see-slots::after {
content: '';
position: absolute;
top: -60%;
left: -80%;
width: 45%;
height: 220%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(25deg);
animation: seeSlotsShimmer 3.5s infinite ease-in-out;
pointer-events: none;
}
@keyframes seeSlotsPulse {
0% {
box-shadow: 0 0 0 0 rgba(39, 82, 62, 0.55), 0 4px 14px rgba(26, 54, 40, 0.25);
}
65% {
box-shadow: 0 0 0 11px rgba(39, 82, 62, 0), 0 6px 20px rgba(26, 54, 40, 0.35);
}
100% {
box-shadow: 0 0 0 0 rgba(39, 82, 62, 0), 0 4px 14px rgba(26, 54, 40, 0.25);
}
}
@keyframes seeSlotsShimmer {
0%, 30% {
transform: translateX(-150%) rotate(25deg);
}
65%, 100% {
transform: translateX(350%) rotate(25deg);
}
}
@keyframes seeSlotsIconTick {
0%, 75%, 100% {
transform: scale(1) rotate(0deg);
}
80% {
transform: scale(1.22) rotate(-10deg);
}
88% {
transform: scale(1.22) rotate(10deg);
}
94% {
transform: scale(1.1) rotate(-4deg);
}
}
/* Extra active state when date is picked to draw immediate attention */
.btn-see-slots.date-picked {
animation: seeSlotsPulsePicked 1.6s infinite cubic-bezier(0.4, 0, 0.6, 1);
background: linear-gradient(135deg, #184D30 0%, #29744B 50%, #1B5636 100%) !important;
}
@keyframes seeSlotsPulsePicked {
0% {
box-shadow: 0 0 0 0 rgba(229, 195, 101, 0.7), 0 4px 16px rgba(24, 77, 48, 0.35);
}
60% {
box-shadow: 0 0 0 13px rgba(229, 195, 101, 0), 0 8px 24px rgba(24, 77, 48, 0.45);
}
100% {
box-shadow: 0 0 0 0 rgba(229, 195, 101, 0), 0 4px 16px rgba(24, 77, 48, 0.35);
}
}
/* --- Tee Time Preference Switcher & Header --- */
.tt-header-wrap {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1.5px solid var(--gf-border, #DAD3C1);
}
.tt-header-text h2 {
margin: 0 0 4px 0;
font-size: 1.35rem;
font-weight: 800;
color: var(--gf-ink, #242320);
}
.slot-pref-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.slot-pref-label {
font-size: 0.84rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--gf-muted, #726E64);
}
.slot-pref-tabs {
display: inline-flex;
align-items: center;
background: var(--gf-paper, #FAF8F5);
padding: 4px;
border-radius: 12px;
border: 1.5px solid var(--gf-border-strong, #C3B99F);
gap: 4px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.slot-pref-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--gf-ink, #242320);
font-family: inherit;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all .16s ease;
white-space: nowrap;
}
.slot-pref-tab:hover:not(.sel) {
background: var(--gf-primary-050, #E9EEE6);
color: var(--gf-primary-600, #1E3B2C);
}
.slot-pref-tab.sel {
background: linear-gradient(135deg, #1E3B2C 0%, #2A5240 100%);
color: #FCFAF5 !important;
font-weight: 700;
box-shadow: 0 2px 6px rgba(30, 59, 44, 0.25);
}
.slot-pref-tab .pref-icon {
flex-shrink: 0;
transition: transform .16s ease;
}
.slot-pref-tab.sel .pref-icon {
color: #E5C365; /* KGC Heritage Gold */
}
.slot-pref-tab:hover .pref-icon {
transform: scale(1.12);
}
.slot-pref-count {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.74rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.07);
color: var(--gf-muted, #726E64);
line-height: 1;
}
.slot-pref-tab.sel .slot-pref-count {
background: rgba(255, 255, 255, 0.22);
color: #FFFFFF;
}
/* Mobile responsive adjustments for slot preference */
@media (max-width: 680px) {
.tt-header-wrap {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.slot-pref-wrap {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.slot-pref-tabs {
width: 100%;
display: flex;
}
.slot-pref-tab {
flex: 1 1 0;
justify-content: center;
padding: 10px 8px;
font-size: 0.85rem;
}
.slot-pref-count {
display: none;
}
}
/* --- Passed / Expired Tee Time Slots --- */
.slot.passed,
.slot.full.passed,
.slot:disabled.passed {
background: #F4F2EC !important;
border: 1px dashed #CFC9BA !important;
color: #8C887B !important;
cursor: not-allowed !important;
opacity: 0.62;
box-shadow: none !important;
transform: none !important;
pointer-events: none;
}
.slot.passed b {
color: #8C887B !important;
}
.slot .av.passed {
color: #8C887B !important;
font-weight: 700;
text-transform: uppercase;
font-size: 0.76rem;
letter-spacing: 0.3px;
}
/* ============================================================================
KGC PORTAL ACCOUNT SECURITY & CHANGE PASSWORD PAGE (/my/security)
========================================================================== */
.o_portal_security_body {
color: var(--gf-ink, #242320) !important;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.o_portal_security_body * {
box-sizing: border-box;
}
.o_portal_security_body h1,
.o_portal_security_body h2,
.o_portal_security_body h3,
.o_portal_security_body h4,
.o_portal_security_body h5 {
color: var(--gf-primary-700, #0C1A13) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.o_portal_security_body label,
.o_portal_security_body .form-label {
color: var(--gf-primary-600, #12261D) !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
margin-bottom: 6px !important;
display: block !important;
}
.o_portal_security_body p,
.o_portal_security_body span,
.o_portal_security_body small,
.o_portal_security_body div {
color: var(--gf-ink, #242320);
}
.o_portal_security_body .form-control,
.o_portal_security_body input[type="password"],
.o_portal_security_body input[type="text"] {
background-color: #FFFFFF !important;
color: #242320 !important;
border: 1.5px solid var(--gf-border, #DAD3C1) !important;
border-radius: 9px !important;
padding: 10px 14px !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
transition: all 0.18s ease !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
width: 100% !important;
}
.o_portal_security_body .form-control:focus,
.o_portal_security_body input[type="password"]:focus,
.o_portal_security_body input[type="text"]:focus {
background-color: #FFFFFF !important;
color: #0C1A13 !important;
border-color: var(--gf-primary-500, #1E3B2C) !important;
box-shadow: 0 0 0 3px rgba(30, 59, 44, 0.18) !important;
outline: none !important;
}
/* ==========================================================================
KGC Member Portal - Account Security & Password Page Redesign
========================================================================== */
.kgc-portal-security-wrapper {
color: #242320 !important;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
padding: 10px 0 60px !important;
max-width: 1060px !important;
margin: 0 auto !important;
box-sizing: border-box;
}
.kgc-portal-security-wrapper * {
box-sizing: border-box;
}
/* Remove default Odoo card shadow/borders enclosing security body */
.card:has(> .kgc-portal-security-wrapper),
.card:has(> .o_portal_security_body),
.o_portal_security_body:not(.kgc-portal-security-wrapper) {
background: transparent !important;
border: none !important;
box-shadow: none !important;
min-height: auto !important;
padding: 0 !important;
}
div.card.shadow.py-2.mb-2:has(a[href*="/my/home"]) {
display: none !important;
}
/* Breadcrumb Navigation */
.kgc-sec-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 20px;
font-size: 0.88rem;
color: #6B685F;
}
.kgc-sec-breadcrumb a {
color: #1E3B2C !important;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
padding: 4px 10px;
background: #EFECE6;
border-radius: 6px;
}
.kgc-sec-breadcrumb a:hover {
color: #0C1A13 !important;
background: #E5E0D5;
text-decoration: none;
}
.kgc-sec-breadcrumb-sep {
color: #BCB6A6;
font-weight: 400;
}
.kgc-sec-breadcrumb-current {
color: #383630;
font-weight: 600;
}
/* Hero Masthead */
.kgc-sec-hero-banner {
background: linear-gradient(135deg, #0C1A13 0%, #162E21 60%, #1E3B2C 100%);
border: 1.5px solid #2D4E3A;
border-radius: 18px;
padding: 30px 36px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 12px 36px rgba(12, 26, 19, 0.22);
position: relative;
overflow: hidden;
}
.kgc-sec-hero-banner::after {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(196, 223, 201, 0.12) 0%, rgba(12, 26, 19, 0) 70%);
pointer-events: none;
}
.kgc-sec-hero-badge,
.kgc-sec-hero-badge *,
.kgc-sec-hero-badge span,
.kgc-sec-hero-banner .kgc-sec-hero-badge,
.kgc-sec-hero-banner .kgc-sec-hero-badge span {
color: #FFFFFF !important;
}
.kgc-sec-hero-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: rgba(255, 255, 255, 0.16) !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
backdrop-filter: blur(8px) !important;
color: #FFFFFF !important;
padding: 6px 14px !important;
border-radius: 30px !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
margin-bottom: 12px !important;
}
.kgc-sec-pulse-dot {
width: 8px !important;
height: 8px !important;
background: #34D399 !important;
border-radius: 50% !important;
box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.4) !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
.kgc-sec-hero-title,
.kgc-sec-hero-banner .kgc-sec-hero-title,
h1.kgc-sec-hero-title {
color: #FFFFFF !important;
font-size: 1.75rem !important;
font-weight: 800 !important;
margin: 0 0 8px !important;
letter-spacing: -0.4px !important;
line-height: 1.2 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}
.kgc-sec-hero-subtitle {
color: #DDE8E1 !important;
font-size: 0.94rem !important;
margin: 0 !important;
line-height: 1.5 !important;
max-width: 640px !important;
}
.kgc-sec-hero-crest {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 18px;
padding: 10px;
}
.kgc-sec-crest-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
/* 2-Column Responsive Layout Grid */
.kgc-sec-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 24px;
align-items: start;
margin-bottom: 28px;
}
@media (max-width: 991px) {
.kgc-sec-grid {
grid-template-columns: 1fr;
}
}
/* Main Form Card */
.kgc-sec-main-card {
background: #FFFFFF !important;
border: 1.5px solid #DAD3C1 !important;
border-radius: 16px !important;
box-shadow: 0 8px 28px rgba(18, 38, 29, 0.06) !important;
overflow: hidden !important;
}
.kgc-sec-card-header {
padding: 22px 28px !important;
border-bottom: 1.5px solid #EAE5D9 !important;
background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F2 100%) !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.kgc-sec-header-icon {
width: 48px !important;
height: 48px !important;
border-radius: 12px !important;
background: #EAF2ED !important;
color: #1E3B2C !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
border: 1.5px solid #C4DFC9 !important;
}
.kgc-sec-header-icon svg {
width: 24px;
height: 24px;
stroke: #1E3B2C;
fill: none;
}
.kgc-sec-header-text h2 {
color: #0C1A13 !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
margin: 0 0 4px !important;
line-height: 1.2 !important;
}
.kgc-sec-header-text p {
color: #55534A !important;
font-size: 0.86rem !important;
margin: 0 !important;
line-height: 1.35 !important;
}
.kgc-sec-card-body {
padding: 28px 30px 32px !important;
background: #FFFFFF !important;
}
/* Form Groups and Controls */
.kgc-sec-field-group {
margin-bottom: 22px !important;
position: relative;
}
.kgc-sec-field-label {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
color: #12261D !important;
margin-bottom: 7px !important;
}
.kgc-sec-input-wrap {
position: relative !important;
display: block !important;
width: 100% !important;
}
.kgc-sec-input-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
color: #7A766A !important;
stroke: #7A766A !important;
fill: none !important;
pointer-events: none !important;
z-index: 4 !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
flex: none !important;
}
.kgc-sec-input,
.kgc-portal-security-wrapper input.kgc-sec-input {
background-color: #FFFFFF !important;
color: #242320 !important;
border: 1.5px solid #DAD3C1 !important;
border-radius: 10px !important;
padding: 12px 46px 12px 42px !important;
height: 48px !important;
font-size: 0.96rem !important;
font-weight: 500 !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
transition: all 0.18s ease !important;
width: 100% !important;
line-height: normal !important;
margin: 0 !important;
}
.kgc-sec-input:focus,
.kgc-portal-security-wrapper input.kgc-sec-input:focus {
background-color: #FFFFFF !important;
color: #0C1A13 !important;
border-color: #1E3B2C !important;
box-shadow: 0 0 0 3.5px rgba(30, 59, 44, 0.16) !important;
outline: none !important;
}
.kgc-portal-security-wrapper .form-control.is-invalid,
.kgc-portal-security-wrapper .form-control.is-valid {
background-image: none !important;
}
.kgc-sec-input::-ms-reveal,
.kgc-sec-input::-ms-clear,
.kgc-portal-security-wrapper input[type="password"]::-ms-reveal,
.kgc-portal-security-wrapper input[type="password"]::-ms-clear,
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none !important;
width: 0 !important;
height: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.kgc-sec-eye-toggle {
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #7A766A !important;
padding: 4px !important;
margin: 0 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 6px !important;
transition: color 0.15s ease, background 0.15s ease !important;
z-index: 4 !important;
width: 28px !important;
height: 28px !important;
line-height: 1 !important;
}
.kgc-sec-eye-toggle:hover {
color: #1E3B2C !important;
background: #F1EDE4 !important;
}
.kgc-sec-eye-toggle svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
fill: none !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
.kgc-sec-eye-toggle .kgc-icon-eye {
display: block !important;
}
.kgc-sec-eye-toggle .kgc-icon-eye-slash {
display: none !important;
}
.kgc-sec-eye-toggle.is-revealed .kgc-icon-eye {
display: none !important;
}
.kgc-sec-eye-toggle.is-revealed .kgc-icon-eye-slash {
display: block !important;
}
/* Helper criteria box */
.kgc-sec-req-box {
background: #FAF8F2;
border: 1px solid #EAE5D9;
border-radius: 8px;
padding: 10px 14px;
margin-top: 8px;
font-size: 0.80rem;
color: #55534A;
}
.kgc-sec-req-title {
font-weight: 700;
color: #1E3B2C;
margin-bottom: 4px;
display: block;
}
.kgc-sec-req-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 4px 12px;
margin: 0;
padding: 0;
list-style: none;
}
.kgc-sec-req-list li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kgc-sec-req-list li svg {
width: 13px;
height: 13px;
stroke: #1E3B2C;
fill: none;
flex-shrink: 0;
}
/* Alerts */
.kgc-portal-security-wrapper .alert-danger {
background-color: #FEF2F2 !important;
color: #991B1B !important;
border: 1px solid #FECACA !important;
border-radius: 10px !important;
padding: 13px 18px !important;
font-weight: 500 !important;
font-size: 0.88rem !important;
margin-bottom: 20px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.kgc-portal-security-wrapper .alert-success {
background-color: #ECFDF5 !important;
color: #065F46 !important;
border: 1px solid #A7F3D0 !important;
border-radius: 10px !important;
padding: 13px 18px !important;
font-weight: 500 !important;
font-size: 0.88rem !important;
margin-bottom: 20px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.kgc-portal-security-wrapper .invalid-feedback {
color: #DC2626 !important;
font-weight: 600 !important;
font-size: 0.82rem !important;
margin-top: 5px !important;
display: block !important;
}
/* Submit Button - HIGH SPECIFICITY & CLEAN CHILD TARGETING */
button.kgc-sec-btn-submit,
.kgc-portal-security-wrapper button[type="submit"].kgc-sec-btn-submit,
.kgc-portal-security-wrapper button.kgc-sec-btn-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
padding: 14px 28px !important;
background: linear-gradient(135deg, #1E3B2C 0%, #12261D 100%) !important;
color: #FFFFFF !important;
border: 1.5px solid #0C1A13 !important;
border-radius: 10px !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
box-shadow: 0 4px 16px rgba(18, 38, 29, 0.25) !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
text-decoration: none !important;
outline: none !important;
margin-top: 10px !important;
}
button.kgc-sec-btn-submit:hover,
.kgc-portal-security-wrapper button[type="submit"].kgc-sec-btn-submit:hover,
.kgc-portal-security-wrapper button.kgc-sec-btn-submit:hover {
background: linear-gradient(135deg, #274C39 0%, #163125 100%) !important;
box-shadow: 0 8px 24px rgba(18, 38, 29, 0.35) !important;
transform: translateY(-1.5px) !important;
color: #FFFFFF !important;
}
button.kgc-sec-btn-submit:active,
.kgc-portal-security-wrapper button[type="submit"].kgc-sec-btn-submit:active,
.kgc-portal-security-wrapper button.kgc-sec-btn-submit:active {
transform: translateY(0) !important;
box-shadow: 0 2px 8px rgba(18, 38, 29, 0.22) !important;
}
/* Explicitly reset children of submit button to avoid nested box/gradient breakage */
button.kgc-sec-btn-submit *,
.kgc-portal-security-wrapper button[type="submit"].kgc-sec-btn-submit *,
.kgc-portal-security-wrapper button.kgc-sec-btn-submit * {
background: transparent !important;
border: none !important;
box-shadow: none !important;
transform: none !important;
}
button.kgc-sec-btn-submit span,
.kgc-portal-security-wrapper button[type="submit"].kgc-sec-btn-submit span,
.kgc-portal-security-wrapper button.kgc-sec-btn-submit span {
color: #FFFFFF !important;
font-weight: 700 !important;
font-size: 0.98rem !important;
padding: 0 !important;
margin: 0 !important;
display: inline !important;
width: auto !important;
line-height: 1.4 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
button.kgc-sec-btn-submit svg,
.kgc-portal-security-wrapper button[type="submit"].kgc-sec-btn-submit svg,
.kgc-portal-security-wrapper button.kgc-sec-btn-submit svg {
color: #FFFFFF !important;
stroke: #FFFFFF !important;
fill: none !important;
width: 19px !important;
height: 19px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-block !important;
flex: 0 0 19px !important;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
}
/* Sidebar Cards */
.kgc-sec-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.kgc-sec-side-card {
background: #FFFFFF;
border: 1.5px solid #DAD3C1;
border-radius: 14px;
padding: 22px 24px;
box-shadow: 0 4px 16px rgba(18, 38, 29, 0.05);
}
.kgc-sec-side-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #EFEBE0;
}
.kgc-sec-side-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #F4EEDC;
color: #8C6A1E;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid #E5D5A6;
}
.kgc-sec-side-icon svg {
width: 19px;
height: 19px;
stroke: currentColor;
fill: none;
}
.kgc-sec-side-title {
font-size: 1.02rem;
font-weight: 700;
color: #0C1A13;
margin: 0;
}
.kgc-sec-tips-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.kgc-sec-tip-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.84rem;
color: #4A4840;
line-height: 1.45;
}
.kgc-sec-tip-bullet {
color: #1E3B2C;
font-weight: 700;
font-size: 1.1rem;
line-height: 1;
flex-shrink: 0;
margin-top: 1px;
}
.kgc-sec-tip-item strong {
color: #12261D;
font-weight: 600;
}
/* Support Help Desk Card */
.kgc-sec-support-card {
background: linear-gradient(180deg, #F8FAF9 0%, #EFF4F1 100%);
border-color: #C6DBD0;
}
.kgc-sec-support-card .kgc-sec-side-icon {
background: #E0EFE6;
color: #1E3B2C;
border-color: #B2D8C1;
}
.kgc-sec-support-desc {
font-size: 0.84rem;
color: #4E5953;
line-height: 1.45;
margin-bottom: 14px;
}
.kgc-sec-contact-items {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.84rem;
}
.kgc-sec-contact-row {
display: flex;
align-items: center;
gap: 10px;
color: #1F362B;
}
.kgc-sec-contact-row svg {
width: 16px;
height: 16px;
stroke: #1E3B2C;
fill: none;
flex-shrink: 0;
}
.kgc-sec-contact-row a {
color: #1E3B2C !important;
font-weight: 600;
text-decoration: none;
}
.kgc-sec-contact-row a:hover {
text-decoration: underline;
}
/* Danger Zone / Deactivate Account Card */
.kgc-sec-danger-card {
background: #FFFFFF;
border: 1.5px solid #F0C4C4;
border-radius: 14px;
padding: 24px 28px;
margin-top: 24px;
box-shadow: 0 4px 16px rgba(148, 32, 31, 0.04);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.kgc-sec-danger-info h3 {
color: #94201F;
font-weight: 700;
font-size: 1.08rem;
margin: 0 0 4px;
}
.kgc-sec-danger-info p {
color: #6E5454;
font-size: 0.86rem;
margin: 0;
line-height: 1.4;
}
.kgc-sec-btn-danger-outline {
background: #FFF5F5 !important;
color: #94201F !important;
border: 1.5px solid #E57373 !important;
border-radius: 9px !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
padding: 10px 18px !important;
transition: all 0.18s ease !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
text-decoration: none !important;
flex-shrink: 0 !important;
}
.kgc-sec-btn-danger-outline:hover {
background: #94201F !important;
color: #FFFFFF !important;
border-color: #94201F !important;
}
/* Modal styling for deactivate account */
#portal_deactivate_account_modal .modal-content {
border-radius: 16px !important;
border: none !important;
overflow: hidden !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
}
#portal_deactivate_account_modal .modal-header {
background: linear-gradient(135deg, #A82323 0%, #7F1A1A 100%) !important;
color: #FFFFFF !important;
padding: 18px 24px !important;
border-bottom: none !important;
}
#portal_deactivate_account_modal .modal-body {
padding: 24px !important;
color: #242320 !important;
}
#portal_deactivate_account_modal .modal-footer {
padding: 16px 24px !important;
background: #FAF8F5 !important;
border-top: 1px solid #ECE7DD !important;
}
/* Responsive adjustments */
@media (max-width: 680px) {
.kgc-sec-hero-banner {
padding: 22px 20px;
flex-direction: column-reverse;
align-items: flex-start;
}
.kgc-sec-hero-crest {
width: 64px;
height: 64px;
align-self: flex-start;
}
.kgc-sec-hero-title {
font-size: 1.4rem !important;
}
.kgc-sec-card-header {
padding: 18px 20px !important;
}
.kgc-sec-card-body {
padding: 20px 18px 24px !important;
}
.kgc-sec-danger-card {
padding: 18px 20px;
}
}