/* ============================================================================ BLEU.live — GLOBAL DESIGN SYSTEM Master design layer. Additive. Presentation only. Encodes the master board (Dr. Felicia, signed baseline). SAFETY: This file ADDS styling. It does not change logic, routing, data piping, ALVAI behavior, the Edge Function, the Ledger, Supabase, Stripe, or Twilio. Importing it and applying classes cannot break the system — it can only restyle what is already there. FONTS: Load Playfair Display + Inter in the page once (see PR note). Do not @import here — it blocks render. ============================================================================ */ :root { /* ---- Surfaces ---- */ --bg-base: #F7F4EF; /* warm ivory — page background */ --bg-raised: #FAF8F3; /* lifted sections */ --surface-card: #FFFFFF; /* cards & panels */ /* ---- Ink / text ---- */ --ink-strong: #1A2A4D; /* headings */ --ink-body: #51617C; /* body copy */ --ink-muted: #8A97AC; /* captions, meta */ /* ---- Brand blue ---- */ --blue-primary: #1E50E0; /* primary actions, primary links */ --blue-hover: #1B45C4; /* hover */ --blue-bright: #2E5BE8; /* accent headline word */ /* ---- Accent family (link colors, matched to icon tints) ---- */ --accent-green: #3F8F5B; --accent-purple: #6B57C9; --accent-orange: #D77E36; /* ---- Soft tints (icon circles & light panels) ---- */ --tint-blue: #E9EEFC; --tint-sage: #E8F1EA; --tint-lavender: #EDEAFA; --tint-peach: #FBEEE2; /* ---- Panel washes ---- */ --wash-blue: #EFF3FC; --wash-green: #EDF4EC; --wash-cta-a: #ECECFB; --wash-cta-b: #F3ECFA; /* ---- Lines ---- */ --hairline: #EBE6DE; --border-card: #ECE8E0; /* ---- Radius ---- */ --r-sm: 8px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; /* ---- Shadow (soft, navy-tinted) ---- */ --shadow-sm: 0 1px 2px rgba(26,42,77,.04); --shadow-card: 0 6px 20px rgba(26,42,77,.06); --shadow-lift: 0 14px 34px rgba(26,42,77,.08); /* ---- Type ---- */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --fs-eyebrow: .8125rem; --fs-body: 1rem; --fs-lead: 1.125rem; --fs-h3: 1.375rem; --fs-h2: 2rem; --fs-h1: clamp(2.5rem, 5vw, 3.5rem); --lh-tight: 1.12; --lh-body: 1.6; /* ---- Spacing (8pt) ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; /* ---- Layout ---- */ --container-max: 1120px; --gutter: clamp(20px, 4vw, 40px); /* ---- Motion ---- */ --ease: cubic-bezier(.2,.7,.2,1); --dur: 180ms; } /* ============================================================================ BASE — opt-in via .bleu-scope so it never fights existing global resets. Wrap a page region in class="bleu-scope" to adopt the system, or add .bleu-scope to for a full-page adoption. ============================================================================ */ .bleu-scope { background: var(--bg-base); color: var(--ink-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .bleu-scope .bleu-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } /* ---- Headings & text ---- */ .bleu-eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-primary); margin: 0 0 var(--space-3); } .bleu-h1, .bleu-h2, .bleu-h3 { font-family: var(--font-display); color: var(--ink-strong); line-height: var(--lh-tight); margin: 0 0 var(--space-4); font-weight: 600; } .bleu-h1 { font-size: var(--fs-h1); } .bleu-h2 { font-size: var(--fs-h2); } .bleu-h3 { font-size: var(--fs-h3); } .bleu-hero__accent { color: var(--blue-bright); } /* two-tone headline */ .bleu-lead { font-size: var(--fs-lead); color: var(--ink-body); max-width: 60ch; } .bleu-body { color: var(--ink-body); max-width: 66ch; } /* reading-friendly measure */ .bleu-muted { color: var(--ink-muted); } /* ============================================================================ BUTTONS ============================================================================ */ .bleu-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; line-height: 1; padding: 14px 24px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); min-height: 44px; /* tap target */ } .bleu-btn--primary { background: var(--blue-primary); color: #fff; box-shadow: var(--shadow-sm); } .bleu-btn--primary:hover { background: var(--blue-hover); } .bleu-btn--secondary { background: var(--surface-card); color: var(--blue-primary); border-color: var(--blue-primary); } .bleu-btn--secondary:hover { background: var(--wash-blue); } .bleu-btn--text { background: none; color: var(--blue-primary); padding: 0; min-height: 0; font-weight: 600; } .bleu-btn--text:hover { color: var(--blue-hover); } /* ============================================================================ ICON CIRCLE + TINT FAMILY ============================================================================ */ .bleu-icon-circle { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--blue-primary); } .tint-blue { background: var(--tint-blue); color: var(--blue-primary); } .tint-sage { background: var(--tint-sage); color: var(--accent-green); } .tint-lavender { background: var(--tint-lavender); color: var(--accent-purple); } .tint-peach { background: var(--tint-peach); color: var(--accent-orange); } /* ============================================================================ FEATURE CARD ============================================================================ */ .bleu-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .bleu-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); } .bleu-card__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink-strong); margin: var(--space-2) 0 0; } .bleu-card__body { color: var(--ink-body); margin: 0; } .bleu-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--blue-primary); } .bleu-card__link.is-green { color: var(--accent-green); } .bleu-card__link.is-purple { color: var(--accent-purple); } .bleu-card__link.is-orange { color: var(--accent-orange); } /* card grid */ .bleu-card-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* ============================================================================ STEP FLOW ("How BLEU Works") ============================================================================ */ .bleu-steps { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .bleu-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .bleu-step__label { color: var(--blue-primary); font-weight: 600; font-size: var(--fs-eyebrow); } .bleu-step__title { color: var(--ink-strong); font-weight: 700; } .bleu-step__body { color: var(--ink-body); font-size: .9375rem; } /* ============================================================================ TINTED PANELS / BANDS ============================================================================ */ .bleu-panel { border-radius: var(--r-lg); padding: var(--space-8); } .bleu-panel--blue { background: var(--wash-blue); } .bleu-panel--green { background: var(--wash-green); } /* CTA band */ .bleu-cta { border-radius: var(--r-lg); padding: var(--space-8) var(--space-8); background: linear-gradient(120deg, var(--wash-cta-a), var(--wash-cta-b)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); justify-content: space-between; } .bleu-cta__copy { max-width: 48ch; } /* ============================================================================ TRUST ROW / BADGES ============================================================================ */ .bleu-trust-row { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); align-items: center; } .bleu-badge { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-body); font-size: .9375rem; } .bleu-badge svg, .bleu-badge .ico { color: var(--blue-primary); flex: none; } /* ============================================================================ FORMS ============================================================================ */ .bleu-input { width: 100%; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--r-sm); padding: 12px 14px; font: inherit; color: var(--ink-strong); } .bleu-input::placeholder { color: var(--ink-muted); } .bleu-input:focus { border-color: var(--blue-primary); } /* ============================================================================ IMAGERY — every image renders in the BLEU vibe Wrap an in .bleu-media for the shared treatment. ============================================================================ */ .bleu-media { position: relative; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-card); } .bleu-media > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Arched-window motif (brand signature) */ .bleu-media--arch { border-radius: 180px 180px var(--r-md) var(--r-md); } /* Warm unifying overlay so mismatched photos read as one set */ .bleu-media--warm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,244,239,.10), rgba(30,80,224,.06)); pointer-events: none; } /* Aspect ratio helpers */ .ar-16x9 { aspect-ratio: 16 / 9; } .ar-4x3 { aspect-ratio: 4 / 3; } .ar-1x1 { aspect-ratio: 1 / 1; } /* ============================================================================ NAV + FOOTER (chrome) ============================================================================ */ .bleu-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) 0; background: transparent; } .bleu-nav__links { display: flex; gap: var(--space-6); } .bleu-nav__links a { color: var(--ink-strong); text-decoration: none; font-weight: 500; } .bleu-nav__links a:hover { color: var(--blue-primary); } .bleu-footer { background: var(--surface-card); border-top: 1px solid var(--hairline); color: var(--ink-body); padding: var(--space-16) 0 var(--space-8); } .bleu-footer h4 { color: var(--ink-muted); font-size: var(--fs-eyebrow); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--space-3); } .bleu-footer a { color: var(--ink-body); text-decoration: none; display: block; padding: 4px 0; } .bleu-footer a:hover { color: var(--blue-primary); } /* ============================================================================ ACCESSIBILITY — contrast contract, focus, motion, targets ============================================================================ */ .bleu-scope :focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .bleu-scope *, .bleu-scope *::before, .bleu-scope *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Contrast guardrails: - --ink-body (#51617C) on --bg-base (#F7F4EF) ~ 5.3:1 PASS (AA body) - --ink-body on --surface-card (#FFFFFF) ~ 5.9:1 PASS (AA body) - #fff on --blue-primary (#1E50E0) ~ 6.0:1 PASS (AA) - Do NOT use --ink-muted for small body text on cream; meta/caption only. - Accent colors (green/purple/orange) are for icons, borders, and large headline words — never small body copy on cream. */ /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 720px) { .bleu-cta { flex-direction: column; align-items: flex-start; } .bleu-nav__links { display: none; } /* hand off to existing mobile drawer */ } /* BLEU.live calm tab render layer — additive presentation only. */ :root{--font-display:"Fraunces",Georgia,"Times New Roman",serif}.theme-start{--accent:#1E50E0;--accent-soft:#E9EEFC;--accent-glow:rgba(30,80,224,.18)}.theme-support{--accent:#3A45C9;--accent-soft:#ECECFB;--accent-glow:rgba(58,69,201,.18)}.theme-near{--accent:#2E8B6F;--accent-soft:#E5F1EC;--accent-glow:rgba(46,139,111,.18)}.theme-learn{--accent:#3F8F5B;--accent-soft:#E8F1EA;--accent-glow:rgba(63,143,91,.18)}.theme-supply{--accent:#C28A2C;--accent-soft:#FAF0DD;--accent-glow:rgba(194,138,44,.20)}.theme-mind{--accent:#6B57C9;--accent-soft:#EDEAFA;--accent-glow:rgba(107,87,201,.18)}.theme-care{--accent:#D77E36;--accent-soft:#FBEEE2;--accent-glow:rgba(215,126,54,.18)} .alva-orb{width:64px;height:64px;border-radius:50%;position:relative;display:inline-block;flex:none;background:radial-gradient(circle at 50% 40%,#fff 0%,rgba(255,255,255,.9) 8%,var(--accent) 48%,#0e1430 100%);box-shadow:0 10px 30px rgba(14,20,48,.30)}.alva-orb::before{content:"";position:absolute;inset:-12px;border-radius:50%;z-index:-1;background:radial-gradient(circle,var(--accent) 0%,transparent 62%);opacity:.30;filter:blur(6px);animation:alva-pulse 3.6s var(--ease,ease-in-out) infinite}.alva-orb__star{position:absolute;left:50%;top:42%;width:48%;height:48%;transform:translate(-50%,-50%);background:#fff;filter:drop-shadow(0 0 4px #fff);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}.alva-orb--inline{width:30px;height:30px;box-shadow:0 4px 12px rgba(14,20,48,.20)}@keyframes alva-pulse{0%,100%{opacity:.22;transform:scale(.96)}50%{opacity:.38;transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.alva-orb::before{animation:none}} .bleu-live-page{min-height:100vh;background:var(--bg-base);padding-top:72px;color:var(--ink-body)}.bleu-live-nav{position:fixed;top:0;left:0;right:0;z-index:50;min-height:72px;display:flex;align-items:center;gap:24px;padding:14px clamp(18px,4vw,48px);background:rgba(247,244,239,.96);border-bottom:1px solid var(--hairline)}.bleu-live-mark{font-family:var(--font-display);font-size:clamp(28px,3vw,38px);font-weight:500;color:var(--ink-strong);text-decoration:none;letter-spacing:-.05em}.bleu-live-mark span{color:var(--accent)}.bleu-live-tabs{display:flex;gap:18px;margin-inline:auto}.bleu-live-tabs a{color:var(--ink-strong);font-weight:700;text-decoration:none;border-bottom:2px solid transparent;padding:10px 2px}.bleu-live-tabs a.active,.bleu-live-tabs a:hover{color:var(--accent);border-color:var(--accent)}.bleu-live-actions{display:flex;gap:10px}.bleu-live-actions button{min-height:40px;border-radius:999px;padding:0 16px;font-weight:700;border:1px solid var(--hairline);background:#fff;color:var(--ink-strong)}.bleu-live-save{background:var(--accent)!important;color:white!important;border-color:var(--accent)!important}.bleu-live-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:42px;align-items:center;padding-top:56px;padding-bottom:38px}.bleu-live-alva-line{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--ink-strong);font-weight:800}.bleu-live-hero .bleu-h1{font-weight:600;letter-spacing:-.05em;margin-bottom:18px}.bleu-live-input{display:flex;align-items:center;gap:10px;margin:28px 0 14px;background:white;border:1px solid var(--hairline);border-radius:999px;padding:8px 8px 8px 20px}.bleu-live-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink-strong);font:500 1rem var(--font-body)}.bleu-live-input button{width:48px;height:48px;border:0;border-radius:50%;background:var(--accent);color:#fff;font-size:24px}.bleu-live-reassure{background:var(--accent-soft);border:1px solid var(--hairline);border-radius:var(--r-md);padding:12px 14px;color:var(--ink-strong);font-weight:700}.bleu-live-chips,.bleu-live-mini-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.bleu-live-chips button,.bleu-live-mini-trust span{border:1px solid var(--hairline);border-radius:999px;background:#fff;color:var(--ink-strong);padding:10px 14px;font-weight:700}.bleu-live-hero-art{min-height:440px;border-radius:var(--r-lg);border:1px solid var(--hairline);background:linear-gradient(135deg,#fffaf2,#eadfcf);display:grid;place-items:center;position:relative;overflow:hidden}.bleu-live-hero-art img{display:block;width:100%;height:100%;min-height:440px;object-fit:cover}.bleu-live-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,244,239,.10),rgba(247,244,239,.72));pointer-events:none}.bleu-live-section{padding-block:28px}.bleu-live-section>.bleu-h2{text-align:center}.bleu-live-card-grid{display:grid;gap:16px}.bleu-live-card-grid.six{grid-template-columns:repeat(6,1fr)}.bleu-live-card-grid.moments{grid-template-columns:repeat(5,1fr)}.bleu-live-card-grid article,.bleu-live-steps div,.bleu-live-trust div,.bleu-live-governance{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:18px;box-shadow:none}.bleu-live-card-grid strong,.bleu-live-steps b,.bleu-live-trust strong{display:block;color:var(--ink-strong);font-weight:800}.bleu-live-card-grid span,.bleu-live-steps span,.bleu-live-trust span{display:block;margin-top:6px;color:var(--ink-body);font-size:.92rem}.bleu-live-card-grid button{margin-top:12px;border:0;background:transparent;color:var(--accent);font-weight:800;padding:0}.bleu-live-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.bleu-live-crisis{margin-block:28px;background:#fff;border:1px solid var(--hairline);border-left:6px solid var(--accent);border-radius:var(--r-lg);padding:18px;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:12px;align-items:center;color:var(--ink-strong)}.bleu-live-crisis span{font-weight:700}.bleu-live-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-block:20px}.bleu-live-governance{text-align:center;margin-block:28px;color:var(--ink-strong);font-weight:700}.bleu-live-governance a{color:var(--accent)}.bleu-live-footer{background:var(--ink-strong);color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;padding:28px;text-align:center;font-weight:800}.bleu-live-hero-art .alva-orb{position:absolute;z-index:1}.bleu-live-footer .alva-orb{z-index:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media (max-width:900px){.bleu-live-nav{position:sticky;flex-wrap:wrap}.bleu-live-page{padding-top:0}.bleu-live-tabs{order:3;width:100%;justify-content:space-between;overflow:auto}.bleu-live-hero{grid-template-columns:1fr;padding-top:32px}.bleu-live-card-grid.six,.bleu-live-card-grid.moments,.bleu-live-steps,.bleu-live-crisis,.bleu-live-trust{grid-template-columns:1fr 1fr}.bleu-live-hero-art,.bleu-live-hero-art img{min-height:260px}}@media (max-width:520px){.bleu-live-actions{width:100%}.bleu-live-actions button{flex:1}.bleu-live-card-grid.six,.bleu-live-card-grid.moments,.bleu-live-steps,.bleu-live-crisis,.bleu-live-trust{grid-template-columns:1fr}.bleu-live-input{border-radius:24px;align-items:stretch}.bleu-live-input input{min-height:52px}.bleu-live-hero{padding-inline:0}} /* BLEU.live Start tab v2 polish — presentation only, no routing changes. */ :root { --font-display: "Fraunces", Georgia, "Times New Roman", serif; } .bleu-scope.theme-start { --accent:#1E50E0; --accent-soft:#E9EEFC; --accent-glow:rgba(30,80,224,.18); } .bleu-live-page { padding-top:72px; background:var(--bg-base); } .bleu-live-nav { background:var(--bg-base); z-index:1000; box-shadow:0 10px 28px rgba(26,42,77,.06); } .bleu-live-hero, .bleu-live-section, .bleu-live-crisis, .bleu-live-trust, .bleu-live-governance { scroll-margin-top:72px; } .bleu-live-hero { grid-template-columns:minmax(0,0.95fr) minmax(360px,1.05fr); gap:clamp(28px,5vw,64px); padding-top:clamp(56px,7vw,88px); padding-bottom:clamp(44px,6vw,72px); } .bleu-live-alva-line { color:var(--accent); letter-spacing:.08em; text-transform:uppercase; } .bleu-live-hero .bleu-h1 { max-width:10.5ch; font-family:var(--font-display); font-weight:500; letter-spacing:-.055em; } .bleu-live-input { box-shadow:var(--shadow-card); border-color:rgba(30,80,224,.16); } .bleu-live-chips button { box-shadow:var(--shadow-sm); } .bleu-live-hero-art { min-height:480px; border:0; border-radius:32px; box-shadow:0 28px 70px rgba(26,42,77,.14); background:linear-gradient(135deg,var(--wash-blue),#fff7e8); } .bleu-live-hero-art img { min-height:480px; object-fit:cover; } .bleu-live-hero-art::after { background:linear-gradient(90deg,rgba(247,244,239,.26),rgba(247,244,239,.02) 42%,rgba(247,244,239,.28)); } .bleu-live-hero-art .alva-orb { display:none; } .bleu-live-section { padding-block:clamp(36px,5vw,64px); } .bleu-live-section--wash { background:linear-gradient(180deg,rgba(239,243,252,.72),rgba(247,244,239,0)); max-width:none; padding-inline:max(var(--gutter),calc((100vw - var(--container-max))/2 + var(--gutter))); } .bleu-live-kicker { margin:0 0 10px; text-align:center; color:var(--accent); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; } .bleu-live-card-grid.six { grid-template-columns:repeat(6,minmax(0,1fr)); } .bleu-live-card-grid.moments { grid-template-columns:repeat(4,minmax(0,1fr)); } .bleu-live-card-grid article.bleu-card { background:var(--surface-card); box-shadow:var(--shadow-card); border-color:var(--border-card); min-height:0; align-items:flex-start; } .bleu-live-card-grid .bleu-icon-circle { font-weight:900; font-size:1.15rem; margin-bottom:4px; } .bleu-live-card-grid button { color:var(--accent); cursor:pointer; } .bleu-live-crisis { grid-template-columns:1.35fr repeat(4,1fr); background:linear-gradient(135deg,#fff,var(--accent-soft)); box-shadow:var(--shadow-card); border-left:6px solid var(--accent); } .bleu-live-crisis p { margin:.25rem 0 0; color:var(--ink-body); } .bleu-live-crisis em { grid-column:1/-1; color:var(--accent); font-style:normal; font-weight:800; } .bleu-live-footer { flex-direction:column; background:#172748; } .bleu-live-footer strong { font-family:var(--font-display); font-size:clamp(1.35rem,3vw,2rem); font-weight:500; } .bleu-live-footer span { max-width:72ch; opacity:.9; } @media (max-width: 900px) { .bleu-live-nav { position:sticky; } .bleu-live-hero { grid-template-columns:1fr; } .bleu-live-hero .bleu-h1 { max-width:13ch; } .bleu-live-card-grid.six, .bleu-live-card-grid.moments, .bleu-live-crisis { grid-template-columns:1fr 1fr; } .bleu-live-hero-art, .bleu-live-hero-art img { min-height:320px; } } @media (max-width: 560px) { .bleu-live-card-grid.six, .bleu-live-card-grid.moments, .bleu-live-crisis { grid-template-columns:1fr; } }