/* ================================================================ GolfForKings — Clubhouse Clean re-skin overrides (v2, June 2026) Loaded LAST in , after each page's inline v1 styles, so it wins the cascade and restyles the legacy class vocabulary (gfkp-*, gfkb-*, gfkh-*, gfkv, gfk-rank-*, w6-*) into the new design language. Tokens come from /gfk.css. ================================================================ */ /* ---------- base ---------- */ body { background: #FFFFFF; color: var(--ink); font-family: var(--sans); } .gfk-display, h1, h2, h3 { font-family: var(--sans); } .gfk-display { font-weight: 800; letter-spacing: -0.03em; font-style: normal; } .gfk-display em, .gfkp-h1 em { font-style: normal; color: #8FD6B8; } main a { color: var(--green-dark); } /* ---------- eyebrows / kickers ---------- */ .gfk-eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dark); border: 0; padding: 0; } .gfk-eyebrow-light { color: rgba(255, 255, 255, 0.92); } /* ---------- buttons: everything becomes a pill ---------- */ .gfk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 13px 26px; cursor: pointer; transition: background 0.25s, transform 0.25s, color 0.25s; } .gfk-btn:hover { background: var(--green-dark); color: #fff; transform: translateY(-1px); } .gfk-btn-sm { padding: 10px 20px; font-size: 13.5px; } .gfk-btn-light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); } .gfk-btn-light:hover { background: var(--green-tint); color: var(--green-dark); } .gfk-btn-outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); } .gfk-btn-outline:hover { background: rgba(255, 255, 255, 0.14); transform: none; } .gfk-btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .gfk-btn-ghost:hover { color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green); background: #fff; } .gfk-btn-block { display: flex; width: 100%; } /* ---------- legacy hero -> rounded photo-card hero ---------- */ .gfkp-hero, .gfk-rpage-hero, .gfk-trip-hero, .gfk-hero, .gfk-dpage-hero { position: relative; max-width: 1232px; margin: 18px auto 0; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(150deg, #9FC8B2, #5B9377); } .gfkp-hero-img, .gfk-rpage-hero-bg, .gfk-trip-hero-img, .gfk-hero-bg, .w6-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gfkp-hero-scrim, .gfk-rpage-hero-scrim, .gfk-trip-hero-scrim, .gfk-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 25, 18, 0.78), rgba(10, 25, 18, 0.18) 55%, rgba(10, 25, 18, 0.05)); } .gfkp-hero-inner, .gfk-rpage-hero-inner, .gfk-trip-hero-inner, .gfk-hero-inner { position: relative; z-index: 2; max-width: none; padding: clamp(72px, 11vw, 150px) clamp(22px, 4vw, 56px) clamp(30px, 4.5vw, 52px); color: #fff; } .gfkp-bc, .gfk-trip-crumb { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); margin-bottom: 14px; } .gfkp-bc a, .gfk-trip-crumb a { color: rgba(255, 255, 255, 0.85); } .gfkp-bc a:hover, .gfk-trip-crumb a:hover { color: #fff; } .gfkp-h1, .gfk-rpage-h, .gfk-trip-h, .gfk-hero-h { font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; color: #fff; } .gfkp-lede, .gfk-rpage-intro, .gfk-trip-sub, .gfk-hero-sub, .gfk-lede { font-size: clamp(15.5px, 1.35vw, 17.5px); line-height: 1.7; color: rgba(255, 255, 255, 0.92); max-width: 64ch; } .gfkp-byline { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.78); } .gfkp-byline a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 2px; } .gfkp-imgcredit { font-size: 11px; color: rgba(255, 255, 255, 0.7); } @media (max-width: 1280px) { .gfkp-hero, .gfk-rpage-hero, .gfk-trip-hero, .gfk-hero, .gfk-dpage-hero { margin-left: 20px; margin-right: 20px; } } @media (max-width: 760px) { .gfkp-hero, .gfk-rpage-hero, .gfk-trip-hero, .gfk-hero, .gfk-dpage-hero { margin-left: 12px; margin-right: 12px; border-radius: 22px; } } /* ---------- sections ---------- */ .gfkp-section { padding: clamp(40px, 6vw, 72px) 0; background: #fff; } .gfkp-section.alt, .gfk-pg-section.alt { background: var(--paper-2); } .gfkp-wrap, .gfk-pg-wrap, .w6-wrap { max-width: 1080px; } .gfkp-h2, .w6-h2, .gfk-pg-section h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); } .gfkp-prose p, .gfk-prose p, .w6-p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); } .gfkp-prose h3, .gfk-prose h3, .w6-h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } /* ---------- facts strip -> facts card ---------- */ .gfkp-facts, .gfk-rpage-facts, .gfk-statstrip { border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; } .gfkp-facts dt { font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; color: var(--ink-soft); } .gfkp-facts dd { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--ink); } /* ---------- notes, callouts ---------- */ .gfkp-note, .gfk-note, .gfk-pg-note, .gfk-concierge-note { background: var(--green-tint); border: 0; border-radius: 20px; padding: 18px 22px; font-size: 13.5px; line-height: 1.65; color: var(--ink); } /* ---------- tables ---------- */ table.gfkv, .gfkp-table table, .gfk-pg-table table, table.gfk-tbl, table.w6-table, .gfk-sc-table, table.gfk-feegrid { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); border-collapse: separate; border-spacing: 0; background: #fff; } table.gfkv thead th, .gfkp-table thead th, .gfk-pg-table thead th, table.gfk-tbl thead th, table.w6-table thead th { background: var(--green-tint); color: var(--green-dark); font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } table.gfkv tbody th { color: var(--ink); font-weight: 700; } table.gfkv caption, .gfkp-table caption { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-size: 12.5px; } /* ---------- ranked lists (best-of, itineraries) ---------- */ .gfkb-rank, .gfkr-item, .gfk-rank-list li, .w6-item { background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s; } .gfkb-rank:hover, .gfkr-item:hover, .gfk-rank-list li:hover, .w6-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .gfkb-num, .gfkr-no, .gfk-rank-no, .w6-rank { background: var(--green-tint); color: var(--green-dark); font-family: var(--sans); font-weight: 800; border-radius: 999px; } .gfkb-meta, .gfkr-loc, .gfk-rank-loc, .w6-meta { color: var(--ink-soft); } .gfkb-fee { color: var(--green-dark); font-weight: 700; } .gfkb-verdict, .gfkv-verdict { color: var(--ink-soft); } .gfkv-pick, .pick { background: var(--green-tint); color: var(--green-dark); border: 0; border-radius: 999px; font-weight: 800; letter-spacing: 0.04em; } .gfk-tier { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); border-bottom: 1px solid var(--line); } /* ---------- cards ---------- */ .gfkp-card, .gfk-card, .gfk-c, .gfk-pg-card, .w6-card, .gfk-idx-card { border-radius: 22px; border: 1px solid var(--line); background: #fff; overflow: hidden; box-shadow: none; transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s; } .gfkp-card:hover, .gfk-card:hover, .gfk-c:hover, .gfk-pg-card:hover, .w6-card:hover, .gfk-idx-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .gfk-card-img img, .gfk-c-img img, .gfk-pg-card-img img, .w6-card-media img, .gfkp-card-img img { transition: transform 0.9s cubic-bezier(.22,1,.36,1); } .gfk-card:hover .gfk-card-img img, .gfk-c:hover .gfk-c-img img, .w6-card:hover .w6-card-media img { transform: scale(1.07); } .gfk-card-name, .gfk-c-name, .w6-card-name, .gfk-pg-card b { font-family: var(--sans); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); } .gfk-tag, .gfk-card-tags span, .cc-tag { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: #F2F5F3; padding: 5px 11px; border-radius: 999px; border: 0; } /* ---------- destination hub grids ---------- */ .gfkh-region, .gfkh-c { border-radius: 22px; border: 1px solid var(--line); background: #fff; overflow: hidden; transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s; } .gfkh-region:hover, .gfkh-c:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* ---------- placeholder art (no-photo slots) ---------- */ .gfk-ph { background: linear-gradient(150deg, #BFDCCB, #7FB99B); } .gfk-ph-stripes, .gfk-ph-grain { opacity: 0.18; } .gfk-ph-label { color: rgba(255, 255, 255, 0.9); font-family: var(--sans); font-weight: 700; } /* ---------- forms: pill inputs, green focus ---------- */ .gfkp-form input:not([type="hidden"]), .gfkp-form select, .gfkp-form textarea, .gfk-form input:not([type="hidden"]), .gfk-form select, .gfk-form textarea, .gfk-field input, .gfk-field select, .gfk-field textarea, .gfk-enq-form input:not([type="hidden"]), .gfk-enq-form select, .gfk-enq-form textarea, .w6-formcard input:not([type="hidden"]), .w6-formcard select, .w6-formcard textarea { font-family: var(--sans); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; outline: 0; transition: border-color 0.25s, box-shadow 0.25s; } .gfkp-form input:focus, .gfkp-form select:focus, .gfkp-form textarea:focus, .gfk-form input:focus, .gfk-enq-form input:focus, .gfk-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(14, 138, 95, 0.15); } .gfkp-form label, .gfk-field-label, .gfk-form label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .gfkp-form button[type="submit"], .gfk-form button[type="submit"], .gfk-enq-form button[type="submit"] { border-radius: 999px; background: var(--green); color: #fff; border: 0; font-weight: 700; padding: 14px 28px; cursor: pointer; transition: background 0.25s, transform 0.25s; } .gfkp-form button[type="submit"]:hover, .gfk-form button[type="submit"]:hover, .gfk-enq-form button[type="submit"]:hover { background: var(--green-dark); transform: translateY(-1px); } /* ---------- enquiry / CTA bands ---------- */ .gfkp-cta, .gfk-enquiry, .gfk-enq, .gfk-plancta { background: var(--green-tint); border: 0; border-radius: 28px; } .gfkp-cta h2, .gfk-enq-h, .gfk-plancta-h { color: var(--ink); font-family: var(--sans); font-weight: 800; letter-spacing: -0.03em; } .gfkp-cta .sub, .gfk-enq-sub, .gfk-plancta-sub { color: var(--ink-soft); } /* ---------- newsletter boxes (existing on-page blocks) ---------- */ .gfkp-news, .gfk-news, .w6-news { background: var(--green-tint); border: 0; border-radius: 28px; } .gfkp-news h2, .gfk-news-h { color: var(--ink); font-family: var(--sans); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(22px, 2.6vw, 30px); } .gfkp-news p, .gfk-news-sub { color: var(--ink-soft); } .gfkp-news input[type="email"], .gfk-news-form input[type="email"], .w6-news-form input[type="email"] { border: 1px solid var(--line); border-radius: 999px; padding: 13px 20px; font-size: 15px; outline: 0; background: #fff; } .gfkp-news input[type="email"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(14, 138, 95, 0.15); } .gfkp-news button, .gfk-news-form button, .w6-news-form button { background: var(--green); } .gfkp-news button:hover, .gfk-news-form button:hover { background: var(--green-dark); } /* ---------- FAQ ---------- */ .gfkp-faq details, .gfk-faq details, .w6-faq details, .gfk-pg-faq details { border: 1px solid var(--line); border-radius: 18px; background: #fff; } .gfkp-faq summary, .gfk-faq summary, .w6-faq summary { font-family: var(--sans); font-weight: 700; color: var(--ink); } /* ---------- related links / reviewed line ---------- */ .gfkp-related a { font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--green-dark); background: var(--green-tint); padding: 9px 16px; border-radius: 999px; display: inline-block; transition: background 0.25s; } .gfkp-related a:hover { color: var(--green-dark); background: #DCEFE6; } .gfkp-reviewed, .gfk-credit { font-size: 12.5px; color: var(--ink-soft); } /* ---------- day-by-day itinerary blocks ---------- */ .gfkp-day, .gfk-pg-day, .w6-day, .gfk-itin > div { border: 1px solid var(--line); border-radius: 20px; background: #fff; } .gfkp-day .d, .gfk-pg-day-n, .w6-day-k { background: var(--green-tint); color: var(--green-dark); font-weight: 800; border-radius: 999px; } /* ---------- scroll reveal (tagged at runtime by gfk-ui.js) ---------- */ .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }