/* CalGrillz — desktop web styles. Extends styles.css tokens. */ /* Reset for desktop */ .cgw { --content-w: 1280px; --gutter: 56px; /* The fixed header has a small contact bar above the main navigation. `--header-h` keeps page content below both sections; the menu drawer itself starts below only the main navigation (see .cgw-mobile-menu). */ --header-main-h: 76px; --header-top-h: 36px; --header-h: calc(var(--header-main-h) + var(--header-top-h)); font-family: var(--font-body); background: var(--charcoal-900); color: var(--cream); min-height: 100vh; overflow-x: hidden; position: relative; /* Push every page's content down so it doesn't slide under the fixed header. Pages don't need to know about the header — they just sit inside .cgw and get spaced automatically. */ padding-top: var(--header-h); } .cgw.cgw--minimal { --header-h: var(--header-main-h); } .cgw * { box-sizing: border-box; } /* page grain */ .cgw::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.55; mix-blend-mode: overlay; } .cgw__wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; } /* HEADER */ .cgw-header { /* `position: sticky` doesn't survive the overflow-x:hidden on set by the Blade layout, so we anchor with position:fixed and pad .cgw to compensate. The fixed bar always stays visible while scrolling. */ position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--charcoal-700); } .cgw-header__topbar { height: var(--header-top-h); background: rgba(19,16,13,0.78); border-bottom: 1px solid rgba(50,42,35,0.7); } .cgw-header__topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .cgw-header__contact { min-width: 0; display: flex; align-items: center; gap: 24px; } .cgw-header__contact a { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; text-decoration: none; transition: color 0.15s; white-space: nowrap; } .cgw-header__contact a:hover { color: var(--cream); } .cgw-header__contact svg { flex: 0 0 auto; color: var(--ember-300); } .cgw-header__address { overflow: hidden; text-overflow: ellipsis; } .cgw-header__address span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cgw-header__phone { flex: 0 0 auto; } .cgw-header__row { display: flex; align-items: center; justify-content: space-between; height: var(--header-main-h); gap: 32px; } .cgw-nav { display: flex; gap: 32px; flex: 1; } .cgw-nav a { color: var(--cream-dim); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: color 0.15s; position: relative; padding: 4px 0; } .cgw-nav a:hover { color: var(--cream); } .cgw-nav a.active { color: var(--ember-200); } .cgw-nav a.active::after { content: ''; position: absolute; inset: auto 0 -2px; height: 2px; background: var(--flame); border-radius: 1px; } .cgw-header__right { display: flex; align-items: center; gap: 14px; } .cgw-header__socials { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; } .cgw-header__socials a { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--cream-dim); text-decoration: none; transition: color 0.15s, background 0.15s; } .cgw-header__socials a:hover { color: #fff; background: rgba(216,99,44,0.22); } .cgw-icon-btn { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--charcoal-700); color: var(--cream); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; } .cgw-icon-btn:hover { background: rgba(255,255,255,0.1); } /* HERO */ .cgw-hero { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; padding: 80px 0 120px; } .cgw-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; /* Stronger darkening so the headline sits clearly over the photo. */ filter: brightness(0.35) saturate(1.25) contrast(1.05); } .cgw-hero__overlay { position: absolute; inset: 0; background: /* Subtle ember warmth toward the right side */ radial-gradient(ellipse at 75% 45%, rgba(216,99,44,0.16) 0%, transparent 55%), /* Heavier dark wash across the whole image; deeper at the bottom for legibility */ linear-gradient(180deg, rgba(19,16,13,0.65) 0%, rgba(19,16,13,0.45) 35%, rgba(19,16,13,0.98) 100%); } .cgw-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; width: 100%; } .cgw-hero__copy h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 8vw, 112px); line-height: 0.98; letter-spacing: -0.015em; text-transform: none; margin: 28px 0 22px; color: var(--cream); text-shadow: 0 4px 40px rgba(0,0,0,0.5); } .cgw-hero__copy h1 em { font-style: italic; color: var(--cream-dim); } .cgw-hero__copy h1 .flame { background: var(--flame); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; font-style: italic; } .cgw-h2 .flame { font-style: italic; } .cgw-hero__sub { font-size: 20px; color: var(--cream-dim); max-width: 460px; line-height: 1.45; } .cgw-hero__ctas { margin-top: 36px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .cgw-meta-row { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 580px; } .cgw-meta-row > div .v { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--cream); letter-spacing: -0.005em; } .cgw-meta-row > div .v .flame { background: var(--flame); -webkit-background-clip: text; background-clip: text; color: transparent; } .cgw-meta-row > div .l { font-size: 11px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-top: 6px; } /* Big buttons */ .cgw-btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; text-transform: none; padding: 16px 28px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; border: none; transition: transform 0.12s, background 0.12s; } .cgw-btn:active { transform: scale(0.97); } .cgw-btn--primary { background: var(--flame); color: var(--cream); box-shadow: 0 10px 32px -10px rgba(200,16,46,0.5), inset 0 1px 0 rgba(255,255,255,0.12); } .cgw-btn--ghost { background: transparent; border: 1px solid var(--charcoal-600); color: var(--cream); } .cgw-btn--ghost:hover { border-color: var(--cream-dim); background: rgba(245,236,220,0.04); } /* Eyebrow + section header */ .cgw-section { padding: 110px 0; position: relative; } .cgw-section--tight { padding: 80px 0; } .cgw-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 56px; } .cgw-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .cgw-eyebrow.ember { color: var(--ember-300); } .cgw-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 4.6vw, 68px); letter-spacing: -0.01em; line-height: 1.05; text-transform: none; color: var(--cream); margin: 10px 0 0; max-width: 800px; } .cgw-h2 .flame { background: var(--flame); -webkit-background-clip: text; background-clip: text; color: transparent; } .cgw-section__head p { font-size: 16px; color: var(--muted); max-width: 380px; line-height: 1.55; } /* What's hot grid */ .cgw-hot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 440px 280px; gap: 16px; } .cgw-hot-grid > :first-child { grid-row: 1 / 3; } .cgw-hot-card { position: relative; overflow: hidden; border-radius: 20px; background: var(--charcoal-800); border: 1px solid var(--charcoal-700); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; cursor: pointer; } .cgw-hot-card:hover { transform: translateY(-4px); border-color: rgba(249,115,22,0.4); box-shadow: 0 24px 60px -20px rgba(200,16,46,0.4); } .cgw-hot-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.85); transition: transform 0.4s; } .cgw-hot-card:hover .cgw-hot-card__img { transform: scale(1.05); } .cgw-hot-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,0.95) 100%); } .cgw-hot-card__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 26px; z-index: 2; } .cgw-hot-card__body .name { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1.05; letter-spacing: -0.01em; text-transform: none; color: var(--cream); } .cgw-hot-card--small .name { font-size: 24px; } .cgw-hot-card__body .price { font-size: 14px; color: var(--cream-dim); margin-top: 8px; font-weight: 600; } .cgw-hot-card__badges { position: absolute; top: 18px; left: 18px; display: flex; gap: 6px; z-index: 2; } /* ── Menu grid + card (responsive; replaces the old inline 3-col grid) ──── */ .cgw-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cgw-menu-card { min-height: 380px; display: block; text-decoration: none; } .cgw-dish-desc { font-size: 12.5px; color: var(--cream-dim); margin-top: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cgw-menu-cta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; /* price + stepper drop to two lines rather than squish */ } .cgw-qty { display: flex; align-items: center; gap: 10px; } .cgw-qty-num { min-width: 18px; text-align: center; font-weight: 800; color: var(--cream); font-size: 16px; } .cgw-qty-btn { width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer; background: var(--flame); color: #fff; padding: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -4px rgba(200,16,46,0.5); } /* Save-for-later (wishlist) heart on each card */ .cgw-wish-btn { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: rgba(10,10,10,0.55); display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.15s; } .cgw-wish-btn:hover { transform: scale(1.08); background: rgba(10,10,10,0.78); } .cgw-wish-btn.is-saved { background: rgba(200,16,46,0.2); } /* Saved-items strip shown above the menu grid */ .cgw-saved { margin-bottom: 22px; } .cgw-saved__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cgw-saved__title { font-family: var(--font-display); font-size: 20px; color: var(--cream); } .cgw-saved__row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .cgw-saved__item { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; background: var(--charcoal-800); border: 1px solid var(--charcoal-700); border-radius: 12px; padding: 8px 10px; max-width: 260px; } .cgw-saved__name { font-size: 13px; color: var(--cream); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; } .cgw-saved__price { font-size: 11px; color: var(--cream-dim); } /* Tablets → two clean columns */ @media (max-width: 860px) { .cgw-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } /* Phones → keep two columns, but shrink type + controls so each card is clean and readable instead of slim and congested. */ @media (max-width: 560px) { .cgw-menu-grid { gap: 10px; } .cgw-menu-card { min-height: 210px; } .cgw-hot-card__body { padding: 12px 12px; } .cgw-hot-card--small .name { font-size: 15px; line-height: 1.12; } .cgw-dish-desc { font-size: 10.5px; margin-top: 5px; } .cgw-hot-card__body .price, .cgw-menu-price { font-size: 11.5px; margin-top: 4px; } .cgw-menu-cta { margin-top: 9px; gap: 6px; } .cgw-qty { gap: 6px; } .cgw-qty-btn { width: 29px; height: 29px; border-radius: 8px; } .cgw-qty-num { font-size: 13px; min-width: 13px; } .cgw-hot-card__badges { top: 8px; left: 8px; gap: 4px; } .cgw-wish-btn { width: 32px; height: 32px; top: 8px; right: 8px; } } /* Placeholder card — for shawarma/parfait */ .cgw-placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 14px, transparent 14px, transparent 28px ), linear-gradient(135deg, #1a1410 0%, #0f0a0a 100%); display: flex; align-items: center; justify-content: center; padding: 28px; } .cgw-placeholder__caption { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); text-align: center; line-height: 1.55; position: relative; z-index: 1; } .cgw-placeholder__caption b { color: var(--ember-200); font-weight: 600; display: block; margin-bottom: 8px; } .cgw-placeholder__corner { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 6px; background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.35); display: flex; align-items: center; justify-content: center; color: var(--ember-200); font-size: 10px; font-family: var(--font-mono); font-weight: 700; } /* Why row */ .cgw-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cgw-why__card { background: var(--charcoal-800); border: 1px solid var(--charcoal-700); border-radius: 20px; padding: 36px 32px; transition: border-color 0.2s; } .cgw-why__card:hover { border-color: rgba(249,115,22,0.3); } .cgw-why__num { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 48px; line-height: 1; color: var(--ember-300); opacity: 0.7; margin-bottom: 22px; letter-spacing: -0.005em; } .cgw-why__title { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: -0.01em; line-height: 1.1; text-transform: none; color: var(--cream); margin: 0 0 14px; } .cgw-why__body { font-size: 15px; color: var(--muted); line-height: 1.55; margin: 0; } /* Gamification - dark grid */ .cgw-game { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cgw-game__card { background: linear-gradient(165deg, var(--charcoal-800) 0%, var(--charcoal-850) 100%); border: 1px solid var(--charcoal-700); border-radius: 20px; padding: 30px 26px; position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.2s; min-height: 280px; display: flex; flex-direction: column; } .cgw-game__card:hover { border-color: rgba(249,115,22,0.35); transform: translateY(-3px); } .cgw-game__card.feature { background: linear-gradient(155deg, rgba(200,16,46,0.16) 0%, var(--charcoal-800) 70%); border-color: rgba(249,115,22,0.3); } .cgw-game__icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .cgw-game__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.005em; line-height: 1.15; text-transform: none; color: var(--cream); } .cgw-game__body { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 10px 0 18px; flex: 1; } .cgw-game__badge { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-200); padding: 6px 10px; background: rgba(0,0,0,0.4); border-radius: 999px; align-self: flex-start; } /* Gallery strip */ .cgw-gallery { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; grid-template-rows: 240px 240px; gap: 12px; } .cgw-gallery > :nth-child(1) { grid-row: 1/3; } .cgw-gallery > :nth-child(5) { grid-row: 1/3; } .cgw-gallery__tile { border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; position: relative; filter: brightness(0.95); transition: filter 0.2s, transform 0.2s; } .cgw-gallery__tile:hover { filter: brightness(1.05); transform: scale(1.01); } /* Story / testimonial */ .cgw-story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; } .cgw-story__quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -0.01em; line-height: 1.2; color: var(--cream); text-transform: none; margin: 24px 0; } .cgw-story__quote::before { content: '"'; font-size: 1.6em; background: var(--flame); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 0.5; display: inline-block; margin-right: 6px; vertical-align: -0.15em; } .cgw-story__by { display: flex; align-items: center; gap: 14px; margin-top: 32px; } .cgw-story__by .avatar { width: 54px; height: 54px; border-radius: 50%; background-size: cover; background-position: center 30%; border: 2px solid var(--charcoal-700); } .cgw-story__by .name { font-size: 15px; font-weight: 700; color: var(--cream); } .cgw-story__by .meta { font-size: 13px; color: var(--muted); margin-top: 2px; } .cgw-story__media { aspect-ratio: 4/5; border-radius: 24px; background-size: cover; background-position: center; border: 1px solid var(--charcoal-700); position: relative; overflow: hidden; } .cgw-story__media .stamp { position: absolute; bottom: 22px; left: 22px; background: rgba(10,10,10,0.75); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); padding: 10px 14px; border-radius: 12px; font-size: 11px; color: var(--cream-dim); font-family: var(--font-mono); letter-spacing: 0.04em; } /* Find us */ .cgw-find { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; } .cgw-find__map { border-radius: 20px; background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); border: 1px solid var(--charcoal-700); position: relative; overflow: hidden; min-height: 460px; } .cgw-find__panel { background: var(--charcoal-800); border: 1px solid var(--charcoal-700); border-radius: 20px; padding: 36px; display: flex; flex-direction: column; gap: 20px; } .cgw-find__row { display: flex; gap: 14px; align-items: flex-start; } .cgw-find__row .icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(249,115,22,0.14); border: 1px solid rgba(249,115,22,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cgw-find__row .label { font-size: 11px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; } .cgw-find__row .val { font-size: 15px; color: var(--cream); font-weight: 600; } /* Footer */ .cgw-footer { background: var(--charcoal-850); border-top: 1px solid var(--charcoal-700); padding: 80px 0 32px; position: relative; overflow: hidden; } .cgw-footer__inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 48px; } .cgw-footer h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); margin: 0 0 18px; } .cgw-footer ul { list-style: none; margin: 0; padding: 0; } .cgw-footer li { font-size: 14px; color: var(--muted); margin-bottom: 10px; cursor: pointer; transition: color 0.15s; } .cgw-footer li:hover { color: var(--ember-200); } .cgw-footer__brand p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 18px 0 22px; max-width: 320px; } .cgw-footer__socials { display: flex; gap: 10px; } .cgw-footer__socials a { width: 40px; height: 40px; border-radius: 12px; background: var(--charcoal-700); border: 1px solid var(--charcoal-600); display: flex; align-items: center; justify-content: center; color: var(--cream-dim); transition: background 0.15s, color 0.15s; text-decoration: none; } .cgw-footer__socials a:hover { background: var(--flame); color: #fff; border-color: transparent; } .cgw-footer__bottom { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--charcoal-700); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted-dim); } /* Sub-hero strip (ticker-ish) */ .cgw-ticker { background: linear-gradient(90deg, var(--charcoal-850), var(--charcoal-800), var(--charcoal-850)); border-top: 1px solid var(--charcoal-700); border-bottom: 1px solid var(--charcoal-700); padding: 16px 0; overflow: hidden; position: relative; } .cgw-ticker__row { display: flex; gap: 36px; animation: cgw-tick 30s linear infinite; white-space: nowrap; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; color: var(--cream); text-transform: uppercase; } .cgw-ticker__row span { display: flex; align-items: center; gap: 14px; } .cgw-ticker__row svg { flex-shrink: 0; } @keyframes cgw-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ════════════════════════════════════════════════════════════════════════ VOUCHER CARD SYSTEM Premium gift-card design with three lifecycle states (available / redeemed / revoked). Used on the customer dashboard, the /voucher page, and the purchase-success modal. Lifted from voucher/vouchers.html so the design system has a single source of truth. ════════════════════════════════════════════════════════════════════════ */ .vc { --w: 420px; --h: 252px; width: var(--w); aspect-ratio: 5/3; border-radius: 22px; position: relative; overflow: hidden; font-family: 'Inter Tight', system-ui, sans-serif; color: var(--cream); isolation: isolate; transition: transform 0.25s cubic-bezier(0.2,0.7,0.3,1); } .vc--interactive { cursor: pointer; } .vc--interactive:hover { transform: translateY(-4px); } /* --- AVAILABLE state --- */ .vc--available { background: radial-gradient(ellipse at top right, rgba(216,99,44,0.35) 0%, transparent 55%), radial-gradient(ellipse at bottom left, rgba(200,16,46,0.25) 0%, transparent 55%), linear-gradient(135deg, #2a1410 0%, #1a0a08 50%, #0a0a0a 100%); border: 1.5px solid; border-image: linear-gradient(135deg, #c8102e 0%, #d8632c 50%, #d4a02e 100%) 1; box-shadow: 0 24px 70px -22px rgba(200,16,46,0.55), 0 0 0 1px rgba(212,160,46,0.15) inset, 0 1px 0 rgba(255,255,255,0.06) inset; } .vc--available::before { content: ''; position: absolute; inset: 0; border-radius: 22px; padding: 1.5px; background: linear-gradient(135deg, #c8102e 0%, #d8632c 35%, #d4a02e 70%, #c8102e 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* --- REDEEMED state --- */ .vc--redeemed { background: linear-gradient(135deg, #1a1612 0%, #13100d 100%); border: 1px solid var(--charcoal-700); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.03) inset; filter: saturate(0.6); } .vc--redeemed .vc__amount, .vc--redeemed .vc__brand-flame, .vc--redeemed .vc__corner-flame { opacity: 0.45; } /* --- REVOKED state --- */ .vc--revoked { background: linear-gradient(135deg, #1a0e0c 0%, #0f0808 100%); border: 1.5px solid rgba(216,99,44,0.45); box-shadow: 0 18px 40px -22px rgba(216,99,44,0.3), 0 0 0 1px rgba(216,99,44,0.1) inset; } .vc--revoked::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0, transparent 18px, rgba(216,99,44,0.06) 18px, rgba(216,99,44,0.06) 19px); pointer-events: none; z-index: 1; } .vc__corner-flame { position: absolute; top: -28px; right: -24px; opacity: 0.18; z-index: 2; pointer-events: none; } .vc--available .vc__corner-flame { opacity: 0.32; } .vc__notch { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--charcoal-900); top: 50%; transform: translateY(-50%); z-index: 3; box-shadow: inset 0 0 0 1.5px var(--charcoal-700); } .vc--available .vc__notch { box-shadow: inset 0 0 0 1.5px rgba(212,160,46,0.4); } .vc--revoked .vc__notch { box-shadow: inset 0 0 0 1.5px rgba(216,99,44,0.5); } .vc__notch--l { left: -11px; } .vc__notch--r { right: -11px; } .vc__inset { position: absolute; inset: 14px; border-radius: 12px; pointer-events: none; z-index: 2; } .vc--available .vc__inset { border: 1px dashed rgba(212,160,46,0.32); } .vc__embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; } .vc__body { position: relative; z-index: 4; height: 100%; padding: 24px 28px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 14px 18px; } .vc__top { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: flex-start; justify-content: space-between; } .vc__main { grid-column: 1; grid-row: 2 / 4; align-self: end; min-width: 0; } .vc__qr { grid-column: 2; grid-row: 2 / 4; align-self: end; } .vc__qr-frame { width: 88px; height: 88px; border-radius: 10px; background: var(--cream); padding: 7px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,160,46,0.25); } .vc--available .vc__qr-frame { box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 0 1.5px #d4a02e, 0 0 18px rgba(212,160,46,0.35); } .vc--redeemed .vc__qr-frame { opacity: 0.55; filter: saturate(0.4); } .vc--revoked .vc__qr-frame { opacity: 0.55; } .vc--revoked .vc__qr-frame::after, .vc--redeemed .vc__qr-frame::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.18) 8px 9px); border-radius: 10px; pointer-events: none; } .vc__qr-frame svg { display: block; width: 100%; height: 100%; } .vc__qr-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .vc__qr-mark span { width: 22px; height: 22px; border-radius: 5px; background: var(--charcoal-900); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--cream); } .vc__qr-label { margin-top: 6px; font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); text-align: center; font-weight: 600; } .vc--redeemed .vc__qr-label, .vc--revoked .vc__qr-label { color: var(--muted); } .vc__brand { display: flex; align-items: center; gap: 10px; } .vc__brand img { height: 28px; width: auto; opacity: 0.9; } .vc__type { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember-200); line-height: 1; } .vc--redeemed .vc__type { color: var(--muted); } .vc--revoked .vc__type { color: var(--ember-300); } .vc__status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; backdrop-filter: blur(8px); } .vc__status--avail { background: rgba(95,163,119,0.18); color: #6fc18b; border: 1px solid rgba(95,163,119,0.4); } .vc__status--redeemed { background: rgba(140,127,112,0.18); color: var(--muted); border: 1px solid rgba(140,127,112,0.3); } .vc__status--revoked { background: rgba(216,99,44,0.18); color: var(--ember-300); border: 1px solid rgba(216,99,44,0.45); } .vc__status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .vc--redeemed .vc__status .dot { box-shadow: none; } .vc__mid { display: flex; align-items: flex-end; gap: 14px; } .vc__amount { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 56px; line-height: 0.9; letter-spacing: -0.015em; color: var(--cream); } .vc--available .vc__amount { background: linear-gradient(135deg, #ffffff 0%, #d4a02e 60%, #d8632c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Stacked meta column: "OFF" sits above "any order". Both use a sans-serif that contrasts the serif amount on its left — different family + size + weight + colour, so they don't read as part of the amount glyph. */ .vc__amount-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px; } .vc__amount-off { font-family: 'Inter Tight', 'Outfit', system-ui, sans-serif; font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: 0.06em; color: var(--ember-300); text-transform: uppercase; } .vc--available .vc__amount-off { text-shadow: 0 0 14px rgba(216, 99, 44, 0.35); } .vc--redeemed .vc__amount-off, .vc--revoked .vc__amount-off { color: var(--muted); text-shadow: none; } .vc__amount-label { font-family: 'Inter Tight', 'Outfit', system-ui, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-dim); line-height: 1; } .vc--redeemed .vc__amount-label, .vc--revoked .vc__amount-label { color: var(--muted); } .vc__code { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-radius: 10px; margin-top: 14px; background: rgba(0,0,0,0.45); border: 1px dashed rgba(212,160,46,0.35); } .vc--redeemed .vc__code { background: rgba(0,0,0,0.3); border: 1px dashed rgba(140,127,112,0.3); } .vc--revoked .vc__code { background: rgba(0,0,0,0.45); border: 1px dashed rgba(216,99,44,0.4); text-decoration: line-through; text-decoration-color: rgba(216,99,44,0.5); } .vc__code-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.08em; color: var(--cream); font-weight: 500; } .vc--redeemed .vc__code-val { color: var(--muted); } .vc__code-action { font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember-300); cursor: pointer; background: transparent; border: 0; padding: 0; } .vc--redeemed .vc__code-action { color: var(--muted); } .vc--revoked .vc__code-action { color: var(--ember-300); } .vc__meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10.5px; color: var(--muted); } .vc__meta strong { color: var(--cream-dim); font-weight: 500; } .vc--available .vc__meta strong { color: var(--ember-200); } .vc__stamp { position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); pointer-events: none; font-family: 'DM Serif Display', Georgia, serif; font-size: 56px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 14px 28px; border: 4px double; border-radius: 6px; white-space: nowrap; } .vc__stamp--redeemed { color: rgba(140,127,112,0.55); border-color: rgba(140,127,112,0.55); text-shadow: 1px 1px 0 rgba(0,0,0,0.3); } .vc__stamp--revoked { color: rgba(216,99,44,0.72); border-color: rgba(216,99,44,0.72); text-shadow: 1px 1px 0 rgba(0,0,0,0.4); } .vc__shimmer { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 55%, transparent 70%); background-size: 200% 100%; animation: vcShimmer 8s linear infinite; } @keyframes vcShimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } .vc__seal { position: absolute; top: 14px; left: -38px; transform: rotate(-45deg); z-index: 4; background: linear-gradient(135deg, #d4a02e 0%, #c89e3a 100%); color: #2a1410; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); } /* Compact mini row (wallet lists / dashboards) */ .vc-mini { --w: 100%; border-radius: 14px; overflow: hidden; padding: 16px 18px; display: flex; align-items: center; gap: 14px; position: relative; } .vc-mini.s-avail { background: linear-gradient(135deg, rgba(200,16,46,0.18), var(--charcoal-800)); border: 1px solid rgba(216,99,44,0.45); } .vc-mini.s-redeemed { background: var(--charcoal-800); border: 1px solid var(--charcoal-700); opacity: 0.7; } .vc-mini.s-revoked { background: linear-gradient(135deg, rgba(216,99,44,0.10), var(--charcoal-800)); border: 1px solid rgba(216,99,44,0.35); } .vc-mini__amt { font-family: 'DM Serif Display', serif; font-size: 28px; letter-spacing: -0.005em; color: var(--cream); flex-shrink: 0; min-width: 90px; } .vc-mini.s-avail .vc-mini__amt { background: linear-gradient(135deg, #ffffff 0%, #d4a02e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .vc-mini.s-redeemed .vc-mini__amt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-dim); } .vc-mini__info { flex: 1; min-width: 0; } .vc-mini__code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--cream-dim); letter-spacing: 0.06em; } .vc-mini__sub { font-size: 11px; color: var(--muted); margin-top: 4px; } .vc-mini__status { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; } .s-avail .vc-mini__status { background: rgba(95,163,119,0.18); color: #6fc18b; } .s-redeemed .vc-mini__status { background: rgba(140,127,112,0.18); color: var(--muted); } .s-revoked .vc-mini__status { background: rgba(216,99,44,0.18); color: var(--ember-300); } .vc-mini__qr { width: 44px; height: 44px; border-radius: 7px; background: var(--cream); padding: 4px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(212,160,46,0.3); position: relative; } .vc-mini.s-redeemed .vc-mini__qr, .vc-mini.s-revoked .vc-mini__qr { opacity: 0.5; filter: saturate(0.3); } .vc-mini__qr svg { width: 100%; height: 100%; display: block; } /* Download toolbar that sits under a VoucherCard */ .vc-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; } .vc-actions button { background: var(--charcoal-800); color: var(--cream); border: 1px solid var(--charcoal-700); border-radius: 10px; padding: 10px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s, background 0.15s; } .vc-actions button:hover { border-color: var(--ember-300); background: var(--charcoal-750); } .vc-actions button:disabled { opacity: 0.5; cursor: progress; } .vc-actions button.primary { background: linear-gradient(135deg, #c8102e 0%, #d8632c 100%); border-color: transparent; color: var(--cream); } @media (max-width: 600px) { .vc { --w: 100%; max-width: 420px; } .vc__amount { font-size: 44px; } .vc__amount-off { font-size: 15px; } .vc__amount-label { font-size: 8px; letter-spacing: 0.2em; } .vc__qr-frame { width: 72px; height: 72px; padding: 5px; } /* Gift-voucher amount presets — nested inside a card, so the generic grid collapse (which only targets direct children of .cgw__wrap) misses them. Keep 3 shrinkable columns and scale the ₦ figure so nothing overflows the card on narrow phones. */ .cgw-amount-grid { gap: 8px !important; } .cgw-amount-grid button { padding: 16px 6px !important; } .cgw-amount-grid button > div { font-size: 19px !important; } /* Dashboard order rows (Overview "Recent orders" + Orders tab) — tighten spacing, let the order#+status chip wrap, and shrink the total so the row never overflows / clips on phones. */ .cgw-order-row { padding: 14px !important; gap: 12px !important; } .cgw-order-total > div:first-child { font-size: 18px !important; } } /* ─────────────────────────────────────────────────────────────────────── Spin the wheel — responsive layout. Wheel itself is sized dynamically in JS (cgw-spin.jsx), this just guards against horizontal overflow and tunes the surrounding chrome at narrow viewports. */ .cgw-spin__title { font-size: 80px; } .cgw-spin__wheel-wrap { margin-top: 50px; position: relative; display: flex; justify-content: center; overflow: visible; width: 100%; } .cgw-spin__prizes { margin: 70px auto 0; max-width: 720px; } .cgw-spin__prize-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .cgw-spin__prize-tile { padding: 16px; background: var(--charcoal-800); border: 1px solid var(--charcoal-700); border-radius: 12px; position: relative; overflow: hidden; } .cgw-spin__howto { max-width: 600px; margin: 60px auto 0; padding: 24px; background: var(--charcoal-800); border: 1px solid var(--charcoal-700); border-radius: 14px; text-align: left; } .cgw-spin__elig { max-width: 440px; margin: 0 auto; padding: 28px 24px; background: linear-gradient(135deg, rgba(216,99,44,0.10), rgba(200,16,46,0.05) 70%, var(--charcoal-800)); border: 1px solid rgba(216,99,44,0.3); border-radius: 18px; text-align: center; } .cgw-spin__result-headline { font-size: 60px; } @media (max-width: 720px) { .cgw-spin__title { font-size: 48px; } .cgw-spin__wheel-wrap { margin-top: 28px; } .cgw-spin__prize-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .cgw-spin__prize-tile { padding: 12px; } .cgw-spin__howto { margin-top: 36px; padding: 20px; } .cgw-spin__prizes { margin: 36px auto 0; } .cgw-spin__result-headline { font-size: 42px; } } @media (max-width: 420px) { .cgw-spin__title { font-size: 38px; } .cgw-spin__result-headline { font-size: 34px; } } /* ─────────────────────────────────────────────────────────────────────── Autofill — force dark theme. Chrome/Safari paint -webkit-autofill inputs with a yellow-white background that completely breaks the charcoal design. The standard trick is a very thick inset box-shadow that "paints over" the autofill colour, plus -webkit-text-fill-color so the actual text stays cream. Applied to anything inside our themed .cg-input class (set on the login/signup form fields) as well as bare inputs inside .cgw-login. */ .cg-input:-webkit-autofill, .cg-input:-webkit-autofill:hover, .cg-input:-webkit-autofill:focus, .cg-input:-webkit-autofill:active, .cgw-login input:-webkit-autofill, .cgw-login input:-webkit-autofill:hover, .cgw-login input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--charcoal-800) inset !important; box-shadow: 0 0 0 1000px var(--charcoal-800) inset !important; -webkit-text-fill-color: var(--cream) !important; caret-color: var(--cream) !important; /* Defeat the gradual-fill animation so the dark fill is instant on focus */ transition: background-color 9999s ease-in-out 0s; } /* Same wrapper trick when the input sits in a flex row with an icon (login email field) */ .cg-input-wrap:has(input:-webkit-autofill) { background: var(--charcoal-800) !important; } /* Hamburger menu button — only visible at mobile breakpoints (rules below). Sits in .cgw-header__right alongside the cart + Order-now button. */ .cgw-hamburger { display: none; background: transparent; border: 1px solid var(--charcoal-700); color: var(--cream); width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color 0.15s, background 0.15s; } .cgw-hamburger:hover { border-color: var(--ember-300); background: var(--charcoal-800); } .cgw-hamburger:active { transform: scale(0.96); } /* Mobile-only "Order now" pill — sits between cart icon and hamburger. Hidden on desktop where the bigger .cgw-header__order button takes over. */ .cgw-header__order-mobile { display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, #c8102e 0%, #d8632c 100%); color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; padding: 11px 16px; border-radius: 999px; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(200, 16, 46, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); white-space: nowrap; transition: transform 0.12s, box-shadow 0.15s; } .cgw-header__order-mobile:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(200, 16, 46, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .cgw-header__order-mobile:active { transform: scale(0.97); } /* Logged-in "My Account" desktop nav item — extra-prominent so the user always sees where their dashboard lives. */ .cgw-nav a.cgw-nav__account { color: var(--ember-200); background: rgba(216, 99, 44, 0.08); border: 1px solid rgba(216, 99, 44, 0.25); padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; } .cgw-nav a.cgw-nav__account:hover { background: rgba(216, 99, 44, 0.15); border-color: rgba(216, 99, 44, 0.45); color: var(--cream); } .cgw-nav a.cgw-nav__account.active { color: var(--cream); border-color: var(--ember-300); background: rgba(216, 99, 44, 0.18); } .cgw-nav a.cgw-nav__account::after { display: none; } /* don't draw the underline pip */ .cgw-mobile-menu__account { color: var(--ember-200) !important; font-weight: 700; } /* ─── Header user-menu dropdown ───────────────────────────────────── Used by the user icon in the header when signed-in. Each item is a clickable row with a small icon on the left. Items animate on hover; the danger variant (Sign out) lights up red. */ .cgw-user-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: transparent; border: none; border-radius: 8px; color: var(--cream); font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.12s, color 0.12s; font-family: inherit; } .cgw-user-menu__item:hover { background: var(--charcoal-700); } .cgw-user-menu__item--danger { color: var(--danger); } .cgw-user-menu__item--danger:hover { background: rgba(216, 99, 44, 0.12); } .cgw-user-menu__item svg { flex-shrink: 0; opacity: 0.7; } .cgw-user-menu__item:hover svg { opacity: 1; } /* The account trigger is the first control in the compact mobile action row. A desktop-style 220px popover would therefore extend off the left edge of the viewport. On mobile, make it a safely inset, scrollable panel below the full header instead. */ @media (max-width: 980px) { .cgw-header__right .cgw-user-menu { position: fixed !important; top: calc(var(--header-h) + 8px) !important; left: var(--gutter) !important; right: var(--gutter) !important; width: auto !important; min-width: 0 !important; max-height: calc(100dvh - var(--header-h) - 24px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } /* Mobile slide-down drawer — hidden until .open */ .cgw-mobile-menu { display: none; position: absolute; top: var(--header-main-h); /* directly below the main navigation */ left: 0; right: 0; background: rgba(19, 16, 13, 0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--charcoal-700); z-index: 120; animation: cgw-menu-in 0.18s ease-out; } .cgw-mobile-menu.open { display: block; } .cgw-mobile-menu nav { display: flex; flex-direction: column; padding: 10px 18px 18px 18px; } .cgw-mobile-menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 6px; color: var(--cream-dim); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px solid rgba(50,42,35,0.6); transition: color 0.12s; } .cgw-mobile-menu a:last-child { border-bottom: 0; } .cgw-mobile-menu a:hover { color: var(--cream); } .cgw-mobile-menu a.active { color: var(--ember-300); } .cgw-mobile-menu a svg { color: var(--muted); flex-shrink: 0; } .cgw-contact__social-links { display: flex; align-items: center; gap: 8px; } .cgw-contact__social-links a { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--cream-dim); background: var(--charcoal-800); border: 1px solid var(--charcoal-700); text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; } .cgw-contact__social-links a:hover { color: #fff; background: var(--flame); border-color: transparent; } @keyframes cgw-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* responsive — tablet break */ @media (max-width: 980px) { .cgw { --gutter: 24px; } .cgw-nav { display: none; } .cgw-header__socials { display: none; } .cgw-hamburger { display: inline-flex; } /* Make room: drop the desktop "Order now" CTA so we don't crowd the bar */ .cgw-header__order { display: none !important; } /* Bring in the compact mobile Order now pill instead. */ .cgw-header__order-mobile { display: inline-flex; } .cgw-hero__inner { grid-template-columns: 1fr; } .cgw-hot-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 320px 200px 200px; } .cgw-hot-grid > :first-child { grid-column: 1/3; grid-row: 1; } .cgw-why, .cgw-game { grid-template-columns: 1fr 1fr; } .cgw-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 200px); } .cgw-gallery > :nth-child(1), .cgw-gallery > :nth-child(5) { grid-row: auto; } .cgw-story { grid-template-columns: 1fr; } .cgw-find { grid-template-columns: 1fr; } .cgw-footer__inner { grid-template-columns: 1fr 1fr; } } /* responsive — phone break (≤720px) */ @media (max-width: 720px) { /* Drop the header height so the .cgw body padding shrinks with the bar and sticky elements (mobile drawer, dashboard tabs) stay flush. */ .cgw { --gutter: 18px; --content-w: 100%; --header-main-h: 64px; --header-top-h: 42px; } .cgw-header__topbar-inner { gap: 0; padding: 8px 0 2px; } .cgw-header__contact { width: 100%; justify-content: space-between; gap: 10px; } .cgw-header__contact a { font-size: 11px; line-height: 1.25; } .cgw-header__address { flex: 1 1 auto; } /* Header — keep user icon visible on phones so signed-in users have a dashboard shortcut alongside the cart + Order-now pill. */ .cgw-header__row > a img { height: 38px !important; } .cgw-header__right { gap: 8px; } .cgw-header__right .cgw-btn { padding: 10px 16px !important; font-size: 12px !important; } .cgw-header__right .cgw-btn svg { display: none; } .cgw-header__order-mobile { padding: 9px 12px; font-size: 11.5px; } /* Hero */ .cgw-hero { min-height: 0; padding: 32px 0 60px; } .cgw-hero__copy h1 { font-size: 48px !important; margin-top: 20px; } .cgw-hero__sub { font-size: 15px; } .cgw-hero__ctas { gap: 10px; } .cgw-hero__ctas .cgw-btn { padding: 13px 20px; font-size: 13px; flex: 1; min-width: 0; justify-content: center; } .cgw-meta-row { margin-top: 28px; padding-top: 18px; gap: 12px; grid-template-columns: 1fr 1fr 1fr; } .cgw-meta-row > div .v { font-size: 18px !important; } .cgw-meta-row > div .l { font-size: 9px; letter-spacing: 0.12em; } /* Hero right column (big logo) — shrink */ .cgw-hero__inner > div:last-child img { width: 200px !important; } .cgw-hero__inner > div:last-child > div { width: 200px !important; height: 200px !important; } /* Sections */ .cgw-section { padding: 56px 0; } .cgw-section--tight { padding: 40px 0; } .cgw-section__head { flex-direction: column; gap: 12px; margin-bottom: 28px; align-items: flex-start; } .cgw-section__head p { font-size: 14px; } /* H2 */ .cgw-h2 { font-size: 36px !important; } /* What's hot grid — single column */ .cgw-hot-grid { grid-template-columns: 1fr; grid-template-rows: 320px repeat(4, 220px); } .cgw-hot-grid > :first-child { grid-column: 1; grid-row: 1; } .cgw-hot-card__body .name { font-size: 28px; } /* Why / Game — single column */ .cgw-why, .cgw-game { grid-template-columns: 1fr; gap: 12px; } .cgw-why__card { padding: 24px 22px; } .cgw-why__title { font-size: 24px; } .cgw-game__card { min-height: 0; padding: 22px 20px; } /* Gallery */ .cgw-gallery { grid-template-columns: 1fr; grid-template-rows: repeat(6, 200px); gap: 8px; } .cgw-gallery > :nth-child(1), .cgw-gallery > :nth-child(5) { grid-row: auto; } /* Story */ .cgw-story { grid-template-columns: 1fr; gap: 32px; } .cgw-story__quote { font-size: 30px !important; } /* Find */ .cgw-find { grid-template-columns: 1fr; gap: 16px; } .cgw-find__map { min-height: 240px; } .cgw-find__panel { padding: 24px; } /* Page hero (section under header) */ section[style*="padding: 70px 0 50px"] { padding: 36px 0 24px !important; } /* Login page — image-half + form-half stacks; shrink image height */ body > #root > div > section[style*="grid-template-columns"] { grid-template-columns: 1fr !important; min-height: 0 !important; } body > #root > div > section[style*="grid-template-columns"] > div:first-child { min-height: 220px !important; padding: 36px !important; } body > #root > div > section[style*="grid-template-columns"] > div:first-child h2, body > #root > div > section[style*="grid-template-columns"] > div:first-child > div:last-child h2 { font-size: 30px !important; } body > #root > div > section[style*="grid-template-columns"] > div:last-child { padding: 36px 20px !important; } body > #root > div > section[style*="grid-template-columns"] > div:last-child h1 { font-size: 36px !important; } body > #root > div > section[style*="grid-template-columns"] > div:last-child img { display: none; } /* Force any 2-column .cgw__wrap grid into one column. The .cgw-stack-mobile class opts an explicit grid container in; the broader attribute selector catches the inline-styled grid wrappers in cart/checkout/item/order/me/voucher pages. */ .cgw-stack-mobile-grid, .cgw__wrap[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } section .cgw__wrap > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } /* min-width:auto is the default on grid/flex items, which lets a wide inline-grid descendant (e.g. the voucher amount presets) stretch a collapsed column past the viewport and clip. Force every level of these 2-column page wrappers to be shrinkable so content always fits the phone width. */ .cgw__wrap[style*="grid-template-columns"], .cgw__wrap[style*="grid-template-columns"] > *, .cgw__wrap[style*="grid-template-columns"] > * > *, .cgw__wrap[style*="grid-template-columns"] > * > * > * { min-width: 0 !important; } /* Asides become unstuck on mobile */ aside[style*="sticky"] { position: static !important; top: auto !important; } /* Tabs (me page) — let them scroll horizontally */ .cgw__wrap > div[style*="display: flex"][style*="gap: 0"] { overflow-x: auto; flex-wrap: nowrap !important; } /* Footer */ .cgw-footer { padding: 56px 0 24px; } .cgw-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; } .cgw-footer__brand { grid-column: 1 / -1; } .cgw-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 32px; } /* Ticker */ .cgw-ticker { padding: 12px 0; } .cgw-ticker__row { font-size: 11px; gap: 22px; } /* Aggressive font-size shrink for inline-styled big text */ [style*="font-size: 96px"], [style*="font-size: 110px"], [style*="font-size: 120px"] { font-size: 48px !important; line-height: 1 !important; } [style*="font-size: 80px"], [style*="font-size: 72px"] { font-size: 38px !important; } [style*="font-size: 64px"] { font-size: 34px !important; line-height: 1.05 !important; } [style*="font-size: 56px"] { font-size: 32px !important; } [style*="font-size: 48px"] { font-size: 30px !important; } [style*="font-size: 44px"] { font-size: 28px !important; } [style*="font-size: 38px"] { font-size: 24px !important; } [style*="font-size: 36px"] { font-size: 24px !important; } [style*="font-size: 32px"] { font-size: 22px !important; } /* Inline padding shrink for big sections */ [style*="padding: 60px 0 100px"], [style*="padding: 50px 0 100px"], [style*="padding: 50px 0 120px"], [style*="padding: 80px 0 120px"], [style*="padding: 60px 0 120px"] { padding: 32px 0 56px !important; } [style*="padding: 60px 0 50px"], [style*="padding: 80px 0 50px"] { padding: 32px 0 24px !important; } [style*="padding: 50px 0 70px"] { padding: 28px 0 32px !important; } /* Card padding shrink */ [style*="padding: 40px 44px"] { padding: 24px 22px !important; } [style*="padding: 36px 32px"] { padding: 24px 20px !important; } /* Dashboard tabs (me page) — horizontally scrollable */ .cgw__wrap > div[style*="border-bottom"], div[style*="position: sticky"][style*="--header-h"] > .cgw__wrap > div { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cgw__wrap > div[style*="border-bottom"] button { white-space: nowrap; padding: 16px 14px !important; font-size: 12px !important; } /* New: forms + asides — any internal grid stacks on phone */ form [style*="grid-template-columns"], aside [style*="grid-template-columns"], section [style*="grid-template-columns: 1fr 1fr"][style*="margin-top"] { grid-template-columns: 1fr !important; gap: 10px !important; } /* New: 4-col and 5-col repeat grids fold to 2-col at phone */ [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; } [style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr 1fr !important; } } /* Very small phones: collapse 2-col chip grids too */ @media (max-width: 440px) { [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; } } /* Tiny phones (≤380px): tighten more */ @media (max-width: 380px) { .cgw { --gutter: 14px; } .cgw-hero__copy h1 { font-size: 40px !important; } .cgw-h2 { font-size: 30px !important; } .cgw-hero__inner > div:last-child img { width: 160px !important; } .cgw-hero__inner > div:last-child > div { width: 160px !important; height: 160px !important; } .cgw-meta-row > div .v { font-size: 16px !important; } /* Shrink header further so user + cart + order + hamburger fit */ .cgw-header__right { gap: 6px; } .cgw-header__order-mobile { padding: 8px 10px; font-size: 11px; } .cgw-icon-btn { width: 36px; height: 36px; } .cgw-hamburger { width: 38px; height: 38px; } }