/* ========================================================= Groundless — globals.css (FINAL / Design System) Contrato (estricto): - tokens + reset + base + primitives + componentes globales - NO estilos específicos de secciones (#gl-*) - Theme ready: ========================================================= */ /* ========================================================= 01) TOKENS — Core (default = DARK) ========================================================= */ :root{ /* Brand */ --gl-olive: #305601; --gl-ink: #0a2201; --gl-moss: #435102; --gl-sage: #93a85f; --gl-sand: #e8ddcc; /* Theme (dark default) */ --gl-bg: #081406; /* apenas más profundo y menos negro puro */ --gl-fg: rgba(232,221,204,.92); --gl-fg-dim: rgba(232,221,204,.78); --gl-fg-soft: rgba(232,221,204,.66); --gl-accent: rgba(138,160,82,.94); --gl-accent-strong: rgba(147,168,95,.98); /* Surfaces (dark) */ --gl-surface-0: rgba(6,16,4,.18); /* sección suave */ --gl-surface-1: rgba(6,16,4,.28); /* card base */ --gl-surface-2: rgba(10,34,1,.42); /* card emphasis */ --gl-surface-3: rgba(10,34,1,.56); /* card elev */ /* Borders */ --gl-border-1: rgba(147,168,95,.14); --gl-border-2: rgba(147,168,95,.22); --gl-border-3: rgba(147,168,95,.34); /* Shadows */ --gl-shadow-1: 0 10px 30px rgba(0,0,0,.22); --gl-shadow-2: 0 18px 55px rgba(0,0,0,.38); /* Radius */ --gl-radius: 22px; --gl-r-0: 12px; --gl-r-1: 14px; --gl-r-2: 18px; --gl-r-3: 22px; --gl-r-pill: 999px; /* Layout */ --gl-container: 1320px; --gl-gutter: 24px; /* Typography */ --gl-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif; --gl-line: 1.35; /* Motion */ --gl-t-fast: .18s ease; --gl-t-med: .28s ease; /* Focus */ --gl-focus: rgba(147,168,95,.38); /* Background depth (tunable) */ --gl-bgfx-opacity: .88; } /* ========================================================= 01b) THEME — LIGHT (opt-in) Uso: ========================================================= */ html[data-theme="light"]{ --gl-bg: #f3f1e8; /* crema técnico, menos gris */ --gl-fg: rgba(10,18,10,.92); --gl-fg-dim: rgba(10,18,10,.74); --gl-fg-soft: rgba(10,18,10,.60); --gl-accent: rgba(48,86,1,.86); --gl-accent-strong: rgba(48,86,1,.96); --gl-surface-0: rgba(255,255,255,.60); --gl-surface-1: rgba(255,255,255,.72); --gl-surface-2: rgba(255,255,255,.82); --gl-surface-3: rgba(255,255,255,.92); --gl-border-1: rgba(10,18,10,.08); --gl-border-2: rgba(10,18,10,.12); --gl-border-3: rgba(10,18,10,.18); --gl-shadow-1: 0 10px 30px rgba(10,18,10,.10); --gl-shadow-2: 0 18px 55px rgba(10,18,10,.12); --gl-focus: rgba(67,81,2,.22); --gl-bgfx-opacity: .95; } /* ========================================================= 02) RESET (mínimo, controlado) ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; } img{ max-width: 100%; display: block; } a{ text-decoration: none; color: inherit; } button, input, select, textarea{ font: inherit; color: inherit; } ::selection{ background: rgba(147,168,95,.25); } /* ========================================================= 03) BASE ========================================================= */ html{ color-scheme: dark; } html[data-theme="light"]{ color-scheme: light; } body{ font-family: var(--gl-font); line-height: var(--gl-line); background: var(--gl-bg); color: var(--gl-fg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #gl-portal{ width: 100%; background: transparent; color: var(--gl-fg); } .container{ max-width: var(--gl-container); margin: 0 auto; padding: 0 var(--gl-gutter); } /* Links: sobrios, sin “azul default” */ a:hover{ opacity: .92; } /* Focus accesible */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 3px solid var(--gl-focus); outline-offset: 3px; border-radius: var(--gl-r-0); } /* ========================================================= 03b) GLOBAL BACKGROUND SYSTEM — Depth Engine (site-wide) - Infraestructura visual - Theme-aware (dark / light) - No interfiere con layout ni z-index ========================================================= */ body::before{ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(900px 520px at 18% 32%, rgba(147,168,95,.18), transparent 62% ), radial-gradient(760px 520px at 72% 26%, rgba(67,81,2,.16), transparent 64% ), radial-gradient(860px 560px at 58% 78%, rgba(147,168,95,.10), transparent 70% ); filter: blur(10px); opacity: var(--gl-bgfx-opacity); transform: translateZ(0); /* evita repaint innecesario */ } /* ================= LIGHT MODE — Atmospheric Depth ================= */ html[data-theme="light"] body::before{ background: /* masa lateral izquierda */ radial-gradient(1300px 800px at 8% 45%, rgba(48,86,1,.18), transparent 62% ), /* masa lateral derecha */ radial-gradient(1300px 800px at 92% 60%, rgba(48,86,1,.14), transparent 62% ), /* halo superior leve */ radial-gradient(1000px 600px at 50% 0%, rgba(48,86,1,.08), transparent 70% ), /* centro respirable */ radial-gradient(900px 600px at 50% 40%, rgba(255,255,255,.60), transparent 72% ), /* caída vertical controlada */ linear-gradient( 180deg, rgba(10,18,10,.035), rgba(10,18,10,.015) 45%, transparent 75% ); filter: blur(20px); opacity: .92; } /* ========================================================= 04) PRIMITIVES — tipografía, espaciado, estructuras comunes ========================================================= */ section{ padding: 26px 0 6px; } .section-label{ font-size: 14px; color: var(--gl-accent); letter-spacing: .3px; } h1, h2, h3{ margin: 0; letter-spacing: -.2px; } h2{ font-size: 34px; font-weight: 650; } h3{ font-size: 22px; font-weight: 650; } .primary-text{ margin: 0 0 10px; font-size: 16px; max-width: 70ch; color: var(--gl-fg-dim); } .secondary-text{ margin: 0; font-size: 16px; color: var(--gl-fg-soft); max-width: 70ch; } /* Layout primitives */ .two-col-layout{ display: flex; flex-wrap: wrap; gap: 18px; } .feature-grid-3{ display: flex; flex-wrap: wrap; gap: 12px; } /* ========================================================= 05) GLOBAL COMPONENTS — Cards (OFICIAL) Dominio: todo el sitio ========================================================= */ .gl-card{ border-radius: var(--gl-radius); border: 1px solid var(--gl-border-2); background: var(--gl-surface-1); box-shadow: var(--gl-shadow-2); } .gl-card--soft{ background: var(--gl-surface-1); box-shadow: var(--gl-shadow-1); } .gl-card--elev{ background: var(--gl-surface-3); box-shadow: var(--gl-shadow-2); } .gl-card--hover{ transition: transform var(--gl-t-med), box-shadow var(--gl-t-med), border-color var(--gl-t-med); } .gl-card--hover:hover{ transform: translateY(-2px); border-color: var(--gl-border-3); box-shadow: var(--gl-shadow-2); } /* Generic “box” (para piezas pequeñas) */ .gl-box{ border-radius: var(--gl-r-2); border: 1px solid var(--gl-border-1); background: var(--gl-surface-1); box-shadow: var(--gl-shadow-1); } /* Divider global */ .gl-divider{ border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(147,168,95,.28), transparent); } /* Chip / Tag */ .gl-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--gl-r-pill); border: 1px solid var(--gl-border-1); background: rgba(0,0,0,.14); color: var(--gl-fg-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } html[data-theme="light"] .gl-chip{ background: rgba(255,255,255,.66); } /* Inline small note */ .gl-note{ font-size: 13px; line-height: 1.65; color: var(--gl-fg-soft); } /* Image card (global) */ .image-card{ width: 420px; max-width: 100%; height: fit-content; border-radius: var(--gl-radius); border: 1px solid var(--gl-border-2); background: var(--gl-surface-3); overflow: hidden; box-shadow: var(--gl-shadow-2); } .image-card img{ width: 100%; height: auto; display: block; } /* ========================================================= GLOBAL COMPONENTS — Buttons (OFICIAL) Dominio: todo el sitio ========================================================= */ .btn-primary, .btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap: .55em; padding: 12px 16px; min-height: 46px; border-radius: var(--gl-r-pill); font-size: 14px; font-weight: 750; letter-spacing: .2px; line-height: 1; user-select: none; cursor: pointer; transition: transform var(--gl-t-fast), filter var(--gl-t-fast), background var(--gl-t-fast), border-color var(--gl-t-fast), box-shadow var(--gl-t-fast), color var(--gl-t-fast); } /* Primary */ .btn-primary{ color: var(--gl-bg); background: linear-gradient(135deg, var(--gl-sage), var(--gl-moss)); border: 1px solid var(--gl-border-2); box-shadow: var(--gl-shadow-2); } .btn-primary:hover{ transform: translateY(-1px); filter: saturate(112%); } /* Outline (legible en dark y light) */ .btn-outline{ color: var(--gl-fg); background: rgba(0,0,0,.14); border: 1px solid var(--gl-border-2); box-shadow: inset 0 0 0 1px rgba(232,221,204,.06); } .btn-outline:hover{ transform: translateY(-1px); background: rgba(0,0,0,.20); border-color: var(--gl-border-3); } /* Light tune */ html[data-theme="light"] .btn-outline{ background: rgba(255,255,255,.70); color: rgba(10,18,10,.82); box-shadow: inset 0 0 0 1px rgba(10,18,10,.05); } html[data-theme="light"] .btn-outline:hover{ background: rgba(255,255,255,.86); } html[data-theme="light"] .btn-primary{ color: rgba(10,18,10,.92); } /* ========================================================= 07) GLOBAL COMPONENTS — Forms (mínimo, útil) ========================================================= */ .gl-input, .gl-select, .gl-textarea{ width: 100%; border-radius: var(--gl-r-1); border: 1px solid var(--gl-border-2); background: rgba(0,0,0,.16); color: var(--gl-fg); padding: 12px 12px; box-shadow: inset 0 0 0 1px rgba(232,221,204,.04); transition: border-color var(--gl-t-fast), background var(--gl-t-fast); } html[data-theme="light"] .gl-input, html[data-theme="light"] .gl-select, html[data-theme="light"] .gl-textarea{ background: rgba(255,255,255,.76); color: rgba(10,18,10,.92); box-shadow: inset 0 0 0 1px rgba(10,18,10,.04); } .gl-input::placeholder, .gl-textarea::placeholder{ color: var(--gl-fg-soft); } .gl-input:focus, .gl-select:focus, .gl-textarea:focus{ border-color: var(--gl-border-3); background: rgba(0,0,0,.20); outline: none; } html[data-theme="light"] .gl-input:focus, html[data-theme="light"] .gl-select:focus, html[data-theme="light"] .gl-textarea:focus{ background: rgba(255,255,255,.90); } /* ========================================================= GLOBAL COMPONENT — Carousel (site-wide) Dominio: cualquier bloque / página Requiere: JS que alterna .active en .carousel-image ========================================================= */ .carousel-container{ position: relative; } .carousel-wrapper{ position: relative; overflow: hidden; width: 100%; border-radius: var(--gl-radius); border: 1px solid var(--gl-border-2); background: var(--gl-surface-1); box-shadow: var(--gl-shadow-1); } /* frame cuadrado por defecto (tu caso). Si en otra página querés otro ratio, lo cambiás en style.css del bloque específico, no acá. */ .carousel-images{ position: relative; width: 100%; aspect-ratio: 1 / 1; } .carousel-image{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; pointer-events: none; transform: translateZ(0); } .carousel-image.active{ opacity: 1; pointer-events: auto; } /* Controls */ .carousel-btn{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--gl-fg); background: rgba(0,0,0,.28); border: 1px solid var(--gl-border-2); box-shadow: 0 12px 30px rgba(0,0,0,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: transform var(--gl-t-fast), background var(--gl-t-fast), border-color var(--gl-t-fast), opacity var(--gl-t-fast); z-index: 10; opacity: .92; } html[data-theme="light"] .carousel-btn{ background: rgba(255,255,255,.60); box-shadow: 0 12px 28px rgba(10,18,10,.10); } .carousel-btn:hover{ transform: translateY(-50%) scale(1.04); border-color: var(--gl-border-3); background: rgba(0,0,0,.36); opacity: 1; } html[data-theme="light"] .carousel-btn:hover{ background: rgba(255,255,255,.74); } .carousel-btn:active{ transform: translateY(-50%) scale(0.99); } .carousel-btn:focus-visible{ outline: 3px solid var(--gl-focus); outline-offset: 3px; } /* Hit area suave */ .carousel-prev{ left: 14px; } .carousel-next{ right: 14px; } /* Dots */ .carousel-dots{ display: flex; justify-content: center; gap: 8px; padding: 12px 0 4px; } .carousel-dot{ width: 9px; height: 9px; border-radius: 999px; border: 1px solid var(--gl-border-1); background: rgba(232,221,204,.22); cursor: pointer; transition: transform var(--gl-t-fast), background var(--gl-t-fast), border-color var(--gl-t-fast), opacity var(--gl-t-fast); opacity: .9; } html[data-theme="light"] .carousel-dot{ background: rgba(10,18,10,.14); } .carousel-dot:hover{ transform: scale(1.12); border-color: var(--gl-border-2); background: rgba(232,221,204,.36); } html[data-theme="light"] .carousel-dot:hover{ background: rgba(10,18,10,.20); } .carousel-dot.active{ background: var(--gl-accent-strong); border-color: rgba(0,0,0,.12); opacity: 1; transform: scale(1.08); } .carousel-dot:focus-visible{ outline: 3px solid var(--gl-focus); outline-offset: 3px; } /* ========================================================= GLOBAL COMPONENT — Surface Section (reusable) ========================================================= */ .gl-surface-section{ position: relative; isolation: isolate; } .gl-surface-section::before{ content:""; position:absolute; inset:-40px -20px auto -20px; height: 280px; background: radial-gradient(60% 80% at 20% 30%, rgba(147,168,95,.16), transparent 60%), radial-gradient(55% 70% at 80% 40%, rgba(147,168,95,.10), transparent 62%); filter: blur(10px); opacity: .85; z-index: -1; pointer-events:none; } /* ========================================================= 08) THEME TOGGLE — soporte CSS (HTML/JS se hace después) - Recomendación de markup: - JS esperado: alterna html[data-theme="dark|light"] ========================================================= */ .gl-theme-toggle{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; border-radius: var(--gl-r-pill); border: 1px solid var(--gl-border-2); background: rgba(0,0,0,.16); color: var(--gl-fg-dim); cursor: pointer; user-select: none; transition: transform var(--gl-t-fast), background var(--gl-t-fast), border-color var(--gl-t-fast), opacity var(--gl-t-fast); } html[data-theme="light"] .gl-theme-toggle{ background: rgba(255,255,255,.72); color: rgba(10,18,10,.78); } .gl-theme-toggle:hover{ transform: translateY(-1px); border-color: var(--gl-border-3); background: rgba(47,81,1,.12); } .gl-theme-toggle:active{ transform: translateY(0); } /* Mini badge dentro del toggle (opcional) */ .gl-theme-badge{ display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; border-radius: var(--gl-r-pill); border: 1px solid var(--gl-border-1); background: rgba(0,0,0,.18); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gl-fg-soft); } html[data-theme="light"] .gl-theme-badge{ background: rgba(255,255,255,.78); } /* ========================================================= FOOTER — Minimal Premium ========================================================= */ #gl-12-footer{ padding: 88px 0 42px; border-top: 1px solid var(--gl-border-1); background: var(--gl-bg); } #gl-12-footer .footer-core{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; } #gl-12-footer .footer-brand{ display: flex; flex-direction: column; gap: 16px; max-width: 420px; } #gl-12-footer .footer-brand img{ width: 180px; height: auto; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0,0,0,.35)); } #gl-12-footer .footer-tagline{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--gl-fg-dim); } #gl-12-footer .footer-nav{ display: flex; flex-wrap: wrap; gap: 16px; } #gl-12-footer .footer-nav a{ font-size: 14px; color: var(--gl-fg-soft); transition: color var(--gl-t-fast); } #gl-12-footer .footer-nav a:hover{ color: var(--gl-accent); } #gl-12-footer .footer-bottom{ margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--gl-border-1); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; } #gl-12-footer .footer-copy{ font-size: 13px; color: var(--gl-fg-soft); } #gl-12-footer .footer-legal{ display: flex; gap: 10px; font-size: 13px; } #gl-12-footer .footer-legal a{ color: var(--gl-sage); transition: color var(--gl-t-fast); } #gl-12-footer .footer-legal a:hover{ color: var(--gl-accent-strong); } /* ========================================================= 09) ACCESSIBILITY / PERFORMANCE GUARDS ========================================================= */ @media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= GLOBAL — CTA/BUTTON SYSTEM (component) Contract: tokens only. No page overrides. No !important. Applies across all pages. ========================================================= */ :root{ /* Button tokens (derive from your system) */ --gl-btn-radius: 999px; --gl-btn-border: var(--gl-border-2); --gl-btn-bg: var(--gl-surface-1); --gl-btn-fg: var(--gl-fg); --gl-btn-accent: var(--gl-accent); --gl-btn-accent-strong: var(--gl-accent-strong); --gl-btn-shadow: var(--gl-shadow-2); --gl-btn-sheen: color-mix(in oklab, var(--gl-fg) 18%, transparent); --gl-btn-glow: color-mix(in oklab, var(--gl-accent) 22%, transparent); --gl-btn-hover-border: color-mix(in oklab, var(--gl-accent) 24%, var(--gl-border-2)); } /* ---- Canonical class (use when you can) ---- */ .gl-btn{ position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border-radius: var(--gl-btn-radius); border: 1px solid var(--gl-btn-border); background: var(--gl-btn-bg); color: var(--gl-btn-fg); text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; transform: translateZ(0); transition: transform .18s ease, border-color .18s ease, opacity .18s ease, box-shadow .18s ease, background .18s ease; } /* sheen (works without JS) */ .gl-btn::before{ content:""; position:absolute; inset:-1px; border-radius: inherit; background: radial-gradient(140px 140px at 20% 15%, var(--gl-btn-sheen), transparent 60%), radial-gradient(260px 260px at 80% 130%, var(--gl-btn-glow), transparent 62%); opacity: 0; transition: opacity .18s ease; z-index: 0; } /* spotlight (JS sets --mx/--my; still ok without JS) */ .gl-btn::after{ content:""; position:absolute; inset:-1px; border-radius: inherit; background: radial-gradient(280px 280px at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--gl-accent) 22%, transparent), transparent 60%); opacity: 0; transition: opacity .18s ease; z-index: 0; } .gl-btn > *{ position: relative; z-index: 1; } .gl-btn:hover{ transform: translateY(-1px); border-color: var(--gl-btn-hover-border); box-shadow: 0 18px 55px var(--gl-btn-shadow); } .gl-btn:hover::before{ opacity: .95; } .gl-btn:hover::after{ opacity: 1; } .gl-btn:active{ transform: translateY(0px); opacity: .98; } .gl-btn:focus-visible{ outline: none; border-color: color-mix(in oklab, var(--gl-accent) 34%, var(--gl-border-2)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gl-accent) 16%, transparent), 0 18px 55px var(--gl-btn-shadow); } /* ---- Variants ---- */ .gl-btn--primary{ background: var(--gl-btn-accent); color: color-mix(in oklab, #000 92%, transparent); border-color: color-mix(in oklab, var(--gl-accent) 28%, transparent); } .gl-btn--primary::after{ background: radial-gradient(280px 280px at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, #fff 22%, transparent), transparent 60%); } .gl-btn--ghost{ background: transparent; } /* ========================================================= GLOBAL — Backfill: map existing buttons/CTAs to .gl-btn (No HTML edits required) ========================================================= */ /* Put your project’s most common button/link classes here */ a.gl-close-btn, a.button, a.btn, button.button, button.btn, [role="button"].btn, a[data-cta], button[data-cta]{ /* inherit .gl-btn without duplicating markup */ position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border-radius: var(--gl-btn-radius); border: 1px solid var(--gl-btn-border); background: var(--gl-btn-bg); color: var(--gl-btn-fg); text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; transform: translateZ(0); transition: transform .18s ease, border-color .18s ease, opacity .18s ease, box-shadow .18s ease, background .18s ease; } /* pseudo elements for mapped buttons */ a.gl-close-btn::before, a.button::before, a.btn::before, button.button::before, button.btn::before, [role="button"].btn::before, a[data-cta]::before, button[data-cta]::before{ content:""; position:absolute; inset:-1px; border-radius: inherit; background: radial-gradient(140px 140px at 20% 15%, var(--gl-btn-sheen), transparent 60%), radial-gradient(260px 260px at 80% 130%, var(--gl-btn-glow), transparent 62%); opacity: 0; transition: opacity .18s ease; z-index: 0; } a.gl-close-btn::after, a.button::after, a.btn::after, button.button::after, button.btn::after, [role="button"].btn::after, a[data-cta]::after, button[data-cta]::after{ content:""; position:absolute; inset:-1px; border-radius: inherit; background: radial-gradient(280px 280px at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--gl-accent) 22%, transparent), transparent 60%); opacity: 0; transition: opacity .18s ease; z-index: 0; } /* keep text above */ a.gl-close-btn > *, a.button > *, a.btn > *, button.button > *, button.btn > *, [role="button"].btn > *, a[data-cta] > *, button[data-cta] > *{ position: relative; z-index: 1; } a.gl-close-btn:hover, a.button:hover, a.btn:hover, button.button:hover, button.btn:hover, [role="button"].btn:hover, a[data-cta]:hover, button[data-cta]:hover{ transform: translateY(-1px); border-color: var(--gl-btn-hover-border); box-shadow: 0 18px 55px var(--gl-btn-shadow); } a.gl-close-btn:hover::before, a.button:hover::before, a.btn:hover::before, button.button:hover::before, button.btn:hover::before, [role="button"].btn:hover::before, a[data-cta]:hover::before, button[data-cta]:hover::before{ opacity: .95; } a.gl-close-btn:hover::after, a.button:hover::after, a.btn:hover::after, button.button:hover::after, button.btn:hover::after, [role="button"].btn:hover::after, a[data-cta]:hover::after, button[data-cta]:hover::after{ opacity: 1; } a.gl-close-btn:focus-visible, a.button:focus-visible, a.btn:focus-visible, button.button:focus-visible, button.btn:focus-visible, [role="button"].btn:focus-visible, a[data-cta]:focus-visible, button[data-cta]:focus-visible{ outline: none; border-color: color-mix(in oklab, var(--gl-accent) 34%, var(--gl-border-2)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gl-accent) 16%, transparent), 0 18px 55px var(--gl-btn-shadow); } /* Optional: map "primary" buttons you already have */ a.gl-close-btn.gl-close-btn-primary{ background: var(--gl-btn-accent); color: color-mix(in oklab, #000 92%, transparent); border-color: color-mix(in oklab, var(--gl-accent) 28%, transparent); } a.gl-close-btn.gl-close-btn-primary::after{ background: radial-gradient(280px 280px at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, #fff 22%, transparent), transparent 60%); } /* ========================================================= GLOBAL — Theme Toggle (floating) Works with: ========================================================= */ .gl-theme-toggle{ position: fixed; right: 14px; bottom: 14px; z-index: 9999; display: inline-flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 999px; border: 1px solid var(--gl-border-2); background: color-mix(in oklab, var(--gl-surface-2) 72%, transparent); color: var(--gl-fg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 55px var(--gl-shadow-2); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, opacity .18s ease, border-color .18s ease, background .18s ease; } .gl-theme-toggle:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--gl-accent) 22%, var(--gl-border-2)); opacity: .98; } .gl-theme-toggle:active{ transform: translateY(0); } .gl-theme-toggle:focus-visible{ outline: none; border-color: color-mix(in oklab, var(--gl-accent) 34%, var(--gl-border-2)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gl-accent) 14%, transparent), 0 18px 55px var(--gl-shadow-2); } .gl-theme-toggle .gl-tt-ic{ width: 18px; height: 18px; display: inline-block; opacity: .92; } .gl-theme-toggle .gl-tt-txt{ font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .9; } /* Optional: hide on very small screens if you prefer */ @media (max-width: 360px){ .gl-theme-toggle .gl-tt-txt{ display:none; } }