/** * SQCC Page Templates — design tokens * ----------------------------------- * Namespaced --sqcc-* (never bare names like --display, --gap, --width — * Elementor's flexbox Container already owns those; a collision silently * breaks typography with no error, see CONTENT-CHECKLIST.md). * * Palette sampled directly from the client's live homepage and Phuket 9 * draft (current-home.png / phuket9.png) — navy / gold / cream. The teal * accent comes from the client-approved Insights mockup, where it tags * Thailand-market content against UAE's gold. It is a small accent, not a * full reskin: the docx's Phuket 9 design note ("teal and sand rather than * navy and gold") was written before phuket9.png was approved in navy/gold, * so this build keeps the approved look and flags the conflict in * CONTENT-CHECKLIST.md rather than silently overriding it. * * Fonts: match the LIVE site's actual Elementor Global Kit, not the * Insights mockup — fetched sqccproperties.com's kit CSS directly * (`--e-global-typography-primary-font-family: "Cormorant Garamond"`, * `--e-global-typography-text-font-family: "DM Sans"`). The mono-styled * eyebrow/label treatment below is DM Sans in caps + letter-spacing * rather than a literal monospace font — same visual device the Insights * mockup used, without introducing a typeface the live site never loads. */ :root { /* core palette */ --sqcc-navy: #0D1B3E; --sqcc-navy-ink: #0A1530; --sqcc-navy-soft: #5A6C87; --sqcc-gold: #C9A84C; --sqcc-gold-lt: #D7BF7F; --sqcc-gold-dk: #9A7B21; --sqcc-teal: #17605E; --sqcc-cream: #F4F0E8; --sqcc-cream-2: #ECE5DB; --sqcc-tan: #E8E4DC; /* sampled from phuket9.png's "Pick your return" / "Exactly what you pay" sections — a step muter/warmer than --sqcc-cream, not the same tone */ --sqcc-paper: #F7F8FA; --sqcc-card: #FFFFFF; --sqcc-rule: #DCE2EB; --sqcc-rule-2: #EEF1F5; --sqcc-up: #1F7A4D; --sqcc-down: #A93226; --sqcc-amber: #8A6D1F; --sqcc-amber-bg: #FBF3DC; /* layout */ --sqcc-maxw: 1180px; --sqcc-radius: 2px; /* type — matches the live site's Elementor Global Kit exactly */ --sqcc-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sqcc-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sqcc-font-secondary: "Roboto Slab", Georgia, serif; --sqcc-font-mono: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .sqcc, .sqcc p, .sqcc span, .sqcc div, .sqcc li, .sqcc a, .sqcc button { font-family: var(--sqcc-font-sans) !important; } .sqcc { box-sizing: border-box; line-height: 1.6; } .sqcc *, .sqcc *::before, .sqcc *::after { box-sizing: inherit; } .sqcc img { max-width: 100%; display: block; } .sqcc a { color: inherit; } .sqcc .sqcc-wrap { max-width: var(--sqcc-maxw); margin: 0 auto; padding: 0 40px; width: 100%; } @media (max-width: 720px) { .sqcc .sqcc-wrap { padding: 0 22px; } } /* * Full-bleed, unconditionally. Every SQCC section is meant to span the * full browser width (see current-home.png/phuket9.png — every colored * band touches both edges). Elementor's own "Content Width: Full" + * "elementor_header_footer" page template *should* already produce this, * but that depends on the active theme cooperating with Elementor's page * template mechanism, which this plugin can't verify from inside its own * code. This is the standard "break out of any parent max-width" CSS * trick, applied directly to every section regardless of what's wrapping * it — it fixes full-bleed backgrounds even if the page-template route * silently fails on a given theme/host, so the fix doesn't depend on * diagnosing that root cause correctly. */ .sqcc-bg-navy, .sqcc-bg-cream, .sqcc-bg-paper, .sqcc-bg-white, .sqcc-bg-gold, .sqcc-bg-tan { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; box-sizing: border-box; } /* * Opt-out of the full-bleed rule above. Add class "sqcc-contained" (the * Pricing Table / Info Table widgets' own "Fit inside container" switch) * when a section sits inside something already width-constrained — a Tabs * or Accordion content panel, a column — where breaking out to 100vw * measures from the *browser* edge, not the tab panel's edge, and shoves * the section out of alignment with everything around it. Selector is * more specific than the bare .sqcc-bg-* rule above so it wins the * !important vs !important tie on specificity rather than load order. */ .sqcc-contained.sqcc-bg-navy, .sqcc-contained.sqcc-bg-cream, .sqcc-contained.sqcc-bg-paper, .sqcc-contained.sqcc-bg-white, .sqcc-contained.sqcc-bg-gold, .sqcc-contained.sqcc-bg-tan { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .sqcc-contained .sqcc-wrap { max-width: 100%; padding: 0; } .sqcc-bg-navy { background: var(--sqcc-navy); color: #fff; } .sqcc-bg-cream { background: var(--sqcc-cream); color: var(--sqcc-navy-ink); } .sqcc-bg-paper { background: var(--sqcc-paper); color: var(--sqcc-navy-ink); } .sqcc-bg-white { background: var(--sqcc-card); color: var(--sqcc-navy-ink); } .sqcc-bg-gold { background: var(--sqcc-gold); color: var(--sqcc-navy-ink); } .sqcc-bg-tan { background: var(--sqcc-tan); color: var(--sqcc-navy-ink); } .sqcc-eyebrow { font-family: var(--sqcc-font-mono) !important; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sqcc-gold-dk); display: block; margin: 0 0 12px; } .sqcc-bg-navy .sqcc-eyebrow, .sqcc-bg-gold .sqcc-eyebrow { color: var(--sqcc-navy-ink); opacity: .7; } .sqcc-bg-navy .sqcc-eyebrow { color: var(--sqcc-gold-lt); opacity: 1; } /* * !important throughout this block on purpose (skill gotcha: "Elementor * global kit typography wins specificity ties"). Elementor's active-kit * CSS applies as `.elementor-kit-{id} h1` etc — specificity (0,1,1) — and * whichever stylesheet loads LAST wins a tie against a same-specificity * rule like `.sqcc h1`. Load order isn't something this plugin controls * (it depends on the kit CSS's own enqueue timing on this site), so the * only reliable way to guarantee OUR heading font/size actually renders * is to out-rank the kit unconditionally rather than out-race it. */ .sqcc h1, .sqcc h2, .sqcc h3, .sqcc .sqcc-heading { font-family: var(--sqcc-font-serif) !important; font-weight: 500 !important; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 18px; color: var(--sqcc-navy-ink); } .sqcc-bg-navy h1, .sqcc-bg-navy h2, .sqcc-bg-navy h3, .sqcc-bg-navy .sqcc-heading { color: #fff; } .sqcc h1, .sqcc .elementor-widget-sqcc_hero .sqcc-heading { font-size: clamp(36px, 4.6vw, 58px) !important; } .sqcc h2, .sqcc h3.sqcc-heading { font-size: clamp(28px, 3.2vw, 42px) !important; } .sqcc .sqcc-accent { color: var(--sqcc-gold-dk); font-style: italic; } .sqcc-bg-navy .sqcc-accent, .sqcc-bg-gold .sqcc-accent { color: var(--sqcc-gold-lt); } .sqcc-bg-gold .sqcc-accent { color: var(--sqcc-navy); } .sqcc-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sqcc-font-sans); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; text-decoration: none; padding: 15px 30px; border-radius: 4px; transition: .18s ease; border: 1px solid transparent; } .sqcc-btn-primary { background: var(--sqcc-gold); color: var(--sqcc-navy-ink); } .sqcc-btn-primary:hover { background: var(--sqcc-gold-dk); color: #fff; transform: translateY(-1px); } .sqcc-btn-secondary { border-color: rgba(255,255,255,.45); color: inherit; background: transparent; } .sqcc-bg-cream .sqcc-btn-secondary, .sqcc-bg-paper .sqcc-btn-secondary, .sqcc-bg-white .sqcc-btn-secondary, .sqcc-bg-gold .sqcc-btn-secondary { border-color: var(--sqcc-navy-ink); color: var(--sqcc-navy-ink); } .sqcc-btn-secondary:hover { background: rgba(255,255,255,.14); } .sqcc-bg-cream .sqcc-btn-secondary:hover, .sqcc-bg-white .sqcc-btn-secondary:hover, .sqcc-bg-gold .sqcc-btn-secondary:hover { background: rgba(13,27,62,.08); }