/* * Card Spinner — Front-end Styles * All selectors are scoped to .cs-wrap to avoid Elementor conflicts. * Deck accent colours are applied via the CSS custom property --deck-color * which is set inline per card by the PHP render method. */ /* ── Custom Fonts ────────────────────────────────────────────────────────── Add this @import to Elementor > Site Settings > Custom CSS, or to your theme's . It is NOT included here to avoid duplicate network requests. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500&display=swap'); ──────────────────────────────────────────────────────────────────────────── */ .cs-wrap { --linen: #F5F2ED; --navy: #0F1923; --ocean: #4E9EC2; --ocean-dk: #2C6E8A; --sand: #D4C5B2; --ink: #2D2D2D; --muted: #7A7060; background: var(--linen); font-family: 'DM Sans', sans-serif; color: var(--ink); width: 100%; box-sizing: border-box; } /* ── Spin Area ─────────────────────────────────────────────────────────── */ .cs-wrap .cs-spin-area { text-align: center; max-width: 600px; margin: 0 auto; } .cs-wrap .cs-instr { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 30px; } /* ── Wheel ─────────────────────────────────────────────────────────────── */ .cs-wrap .cs-wheel-wrap { position: relative; width: 188px; height: 188px; margin: 0 auto 40px; } .cs-wrap .cs-wheel-ptr { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 18px solid var(--ocean); z-index: 3; } .cs-wrap .cs-wheel { width: 188px; height: 188px; border-radius: 50%; border: 1px solid var(--ocean); position: relative; background: conic-gradient( #4E9EC2 0deg 45deg, /* ocean blue — primary brand accent */ #2C6E8A 45deg 90deg, /* deeper blue — hover/secondary accent */ #0F1923 90deg 135deg, /* navy — headline colour */ #3A8070 135deg 180deg, /* ocean-teal mid */ #1A3A4A 180deg 225deg, /* deep navy-teal */ #5BAFC8 225deg 270deg, /* light ocean */ #22505F 270deg 315deg, /* muted teal */ #2A7A6A 315deg 360deg /* teal-green bridge */ ); will-change: transform; } .cs-wrap .cs-wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: var(--ocean); border-radius: 50%; z-index: 2; } @keyframes cs-wheel-spin { from { transform: rotate(0deg); filter: saturate(1) brightness(1); } 30% { filter: saturate(2.5) brightness(1.3); } 70% { filter: saturate(2.2) brightness(1.2); } to { transform: rotate(var(--cs-spin-deg, 720deg)); filter: saturate(1.4) brightness(1.05); } } .cs-wrap .cs-wheel.cs-spinning { animation: cs-wheel-spin 2s cubic-bezier(.17,.67,.12,.99) forwards; } /* ── Spin Button ────────────────────────────────────────────────────────── */ .cs-wrap .cs-spin-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ocean); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; padding: 16px 44px; border-radius: 100px; border: none; cursor: pointer; letter-spacing: .02em; box-shadow: 0 4px 20px rgba(78,158,194,.25); transition: background .2s, transform .15s, box-shadow .2s; } .cs-wrap .cs-spin-btn:hover { background: var(--ocean-dk); transform: scale(1.02); box-shadow: 0 6px 24px rgba(78,158,194,.35); } .cs-wrap .cs-spin-btn:active { transform: scale(.98); } .cs-wrap .cs-spin-btn svg { transition: transform .3s; flex-shrink: 0; } .cs-wrap .cs-spin-btn:hover svg { transform: rotate(180deg); } /* ── Cards Area ────────────────────────────────────────────────────────── */ .cs-wrap .cs-cards-wrap { /* display, opacity, transform managed entirely by JS */ max-width: 600px; margin: 0 auto; padding-top: 30px; } .cs-wrap .cs-cards-label { text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .cs-wrap .cs-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } /* ── Individual Card ───────────────────────────────────────────────────── */ .cs-wrap .cs-card { background: #fff; border-radius: 0; padding: 24px 20px; position: relative; overflow: hidden; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 2px 16px rgba(0,0,0,.07); } /* Coloured top bar driven by --deck-color set inline per card */ .cs-wrap .cs-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--deck-color, var(--ocean)); } .cs-wrap .cs-card-tag { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; color: var(--deck-color, var(--ocean)); } .cs-wrap .cs-card-q { font-family: 'Playfair Display', serif; font-size: 15px; line-height: 1.6; color: var(--navy); margin: 0; } /* ── Card Buttons ──────────────────────────────────────────────────────── */ .cs-wrap .cs-card-btns { display: flex; gap: 8px; margin-top: 18px; } .cs-wrap .cs-card-btn { flex: 1; padding: 8px 10px; border-radius: 0; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: 'DM Sans', sans-serif; } .cs-wrap .cs-card-btn--keep { background: rgba(78,158,194,.1); color: var(--deck-color, var(--ocean)); border: 1px solid rgba(78,158,194,.2); } .cs-wrap .cs-card-btn--keep:hover { background: rgba(78,158,194,.18); } .cs-wrap .cs-card-btn--keep.cs-kept { background: var(--deck-color, var(--ocean)); color: #fff; border-color: var(--deck-color, var(--ocean)); } .cs-wrap .cs-card-btn--respin { background: var(--linen); color: var(--muted); border: 1px solid var(--sand); } .cs-wrap .cs-card-btn--respin:hover { background: var(--sand); } /* ── Spin Again ────────────────────────────────────────────────────────── */ .cs-wrap .cs-spin-again-row { text-align: center; margin-bottom: 24px; } .cs-wrap .cs-spin-again-btn { background: transparent; border: 1px solid var(--sand); color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 10px 24px; border-radius: 0; cursor: pointer; transition: all .2s; } .cs-wrap .cs-spin-again-btn:hover { border-color: var(--ocean); color: var(--ocean); } /* ── Teaser ────────────────────────────────────────────────────────────── */ .cs-wrap .cs-teaser { text-align: center; padding: 20px 24px; border: 1px solid var(--sand); background: rgba(78,158,194,.04); } .cs-wrap .cs-teaser-text { font-size: 13px; color: var(--muted); margin-bottom: 10px; line-height: 1.65; } .cs-wrap .cs-teaser-text em, .cs-wrap .cs-teaser-text i { font-style: italic; color: var(--navy); } .cs-wrap .cs-teaser a { color: var(--ocean); font-size: 13px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(78,158,194,.3); padding-bottom: 2px; transition: border-color .2s; } .cs-wrap .cs-teaser a:hover { border-bottom-color: var(--ocean); } /* ── Mobile ────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .cs-wrap .cs-spin-area, .cs-wrap .cs-cards-wrap { padding-left: 0; padding-right: 0; } .cs-wrap .cs-cards-grid { grid-template-columns: 1fr; } .cs-wrap .cs-teaser { padding: 16px; } }