/* ════════════════════════════════════════════════════════ INGLÉS 360 THEME v6.0.0 — MAIN CSS Dark-first. Gradients preserved. Glass cards. App-like. Light mode via [data-theme="light"] on . Based on Theme v5 main.css. See THEME-V5-AUDIT.md for the full mapping of what was preserved, refactored, dropped, and improved. ════════════════════════════════════════════════════════ */ /* ── Fonts ──────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..900&family=DM+Sans:ital,opsz,wght@0,9..40,300..700&display=swap'); /* ── Tokens ─────────────────────────────────────────── */ :root { --i360-bg: #05060D; --i360-bg2: #0B0D1A; --i360-surface: rgba(255,255,255,.07); --i360-surface-2: rgba(255,255,255,.04); --i360-border: rgba(255,255,255,.11); --i360-text: #F8F9FF; --i360-muted: #C7CDEB; --i360-pink: #FF74B8; --i360-violet: #8B5CF6; --i360-blue: #49D2FF; --i360-cyan: #2BA3CC; --i360-grad: linear-gradient(90deg,#FF74B8,#8B5CF6,#49D2FF); --i360-grad-45: linear-gradient(135deg,#FF74B8,#8B5CF6,#49D2FF); --i360-grad-btn: linear-gradient(90deg,#FF74B8,#8B5CF6,#49D2FF); --i360-card-r: 22px; --i360-btn-r: 18px; --i360-pill: 999px; --i360-t: .18s ease; --i360-blur: blur(20px); --i360-hdr-bg: rgba(5,6,13,.90); --i360-hdr-h: 64px; --i360-pad: clamp(18px,5vw,52px); --i360-content: 820px; --i360-wide: 1360px; --i360-focus: 0 0 0 2px rgba(139,92,246,.75); } /* ── Reset + body shell ─────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--i360-hdr-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--i360-bg); background-image: radial-gradient(54vw 44vh at 6% 10%, rgba(255,116,184,.22), transparent 62%), radial-gradient(56vw 48vh at 84% 12%, rgba(139,92,246,.26), transparent 60%), radial-gradient(48vw 42vh at 80% 78%, rgba(73,210,255,.18), transparent 60%), linear-gradient(180deg,#05060D,#0B0D1A 60%,#060711); color: var(--i360-text); font-family: 'DM Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.7; min-height: 100vh; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--i360-pink); text-decoration: none; transition: color var(--i360-t); } a:hover { color: var(--i360-blue); } a:focus-visible { outline: none; box-shadow: var(--i360-focus); border-radius: 4px; } h1, h2, h3, h4, h5, h6 { font-family: 'Syne', system-ui, sans-serif; color: var(--i360-text); margin: 0 0 .5em; line-height: 1.1; } /* ── Gradient text utility ────────────────────────── * ONLY safe on large display text (heading-sized and above). * Never apply to functional small text (labels, form hints, * button text) — gradient text fails contrast at small sizes. * Audit this class manually when porting v5 patterns forward. * ──────────────────────────────────────────────────── */ .i360-grad, span.i360-grad, .has-i360-grad-color { background: var(--i360-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; display: inline; } h1.i360-grad-title, h2.i360-grad-title, h3.i360-grad-title { background: var(--i360-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Page title (inner pages) — gradient treatment ── */ .i360-page-title, .wp-block-post-title.i360-page-title { font-family: 'Syne', system-ui, sans-serif !important; font-weight: 900 !important; padding: clamp(40px,6vw,72px) var(--i360-pad) clamp(24px,3vw,40px); margin: 0; background: var(--i360-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; border-bottom: 1px solid var(--i360-border); display: block; } /* ── Eyebrow ────────────────────────────────────────── */ .i360-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--i360-muted); margin: 0 0 12px; display: block; } /* ── Lead ───────────────────────────────────────────── */ .i360-lead { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.72; color: var(--i360-muted); max-width: 800px; } /* ── Header ─────────────────────────────────────────── */ .i360-header { position: sticky !important; top: 0 !important; z-index: 200 !important; height: var(--i360-hdr-h); background: var(--i360-hdr-bg) !important; backdrop-filter: var(--i360-blur); -webkit-backdrop-filter: var(--i360-blur); border-bottom: 1px solid var(--i360-border); display: flex !important; align-items: center !important; margin-block: 0 !important; overflow: visible !important; } .i360-header .wp-block-group { margin-block: 0 !important; } .i360-header__inner { width: 100%; max-width: var(--i360-wide); margin-inline: auto; padding-inline: var(--i360-pad); display: flex !important; align-items: center !important; justify-content: space-between !important; height: 100%; gap: 16px; } .i360-logo-wrap { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; flex-shrink: 0; } /* Logo text — gradient */ .i360-logo, .i360-logo a, .wp-block-site-title.i360-logo, .wp-block-site-title.i360-logo a { font-family: 'Syne', system-ui, sans-serif !important; font-size: clamp(20px, 2.6vw, 26px) !important; font-weight: 900 !important; letter-spacing: -.02em !important; background: var(--i360-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-decoration: none !important; line-height: 1 !important; white-space: nowrap; } /* Navigation */ .i360-header__right { display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0; } .i360-nav .wp-block-navigation__container { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .i360-nav .wp-block-navigation-item__content, .i360-nav a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; color: var(--i360-muted) !important; -webkit-text-fill-color: var(--i360-muted) !important; padding: 7px 12px; border-radius: var(--i360-pill); transition: all var(--i360-t); text-decoration: none; white-space: nowrap; display: block; } .i360-nav .wp-block-navigation-item__content:hover, .i360-nav a:hover, .i360-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--i360-text) !important; -webkit-text-fill-color: var(--i360-text) !important; background: rgba(255,255,255,.08); } /* Mobile nav overlay */ .i360-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--i360-hdr-bg); backdrop-filter: var(--i360-blur); -webkit-backdrop-filter: var(--i360-blur); padding: var(--i360-pad); } /* Theme toggle */ .i360-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--i360-pill); border: 1px solid var(--i360-border); background: rgba(255,255,255,.05); color: var(--i360-text); cursor: pointer; transition: background var(--i360-t); -webkit-appearance: none; appearance: none; position: relative; z-index: 10; } .i360-theme-toggle:hover { background: rgba(255,255,255,.12); } .i360-theme-toggle:focus-visible { outline: none; box-shadow: var(--i360-focus); } /* ── Buttons ────────────────────────────────────────── */ .wp-block-button.i360-btn-primary .wp-block-button__link, .i360-btn-primary .wp-block-button__link { background: var(--i360-grad-btn) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 15px; padding: 14px 26px; border-radius: var(--i360-btn-r); border: none !important; box-shadow: 0 8px 28px rgba(139,92,246,.28); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: box-shadow var(--i360-t), transform var(--i360-t); cursor: pointer; white-space: nowrap; } .wp-block-button.i360-btn-primary .wp-block-button__link:hover { box-shadow: 0 14px 40px rgba(139,92,246,.44); transform: translateY(-1px); } .wp-block-button.i360-btn-ghost .wp-block-button__link, .i360-btn-ghost .wp-block-button__link { background: rgba(255,255,255,.06) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid var(--i360-border) !important; font-family: 'Syne', system-ui, sans-serif; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: var(--i360-btn-r); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all var(--i360-t); cursor: pointer; white-space: nowrap; } .wp-block-button.i360-btn-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.26) !important; } .wp-block-buttons { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center; margin-top: 0; } /* ── Cards ──────────────────────────────────────────── */ .i360-card, .wp-block-column.i360-card { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)), radial-gradient(500px 140px at 0% 0%, rgba(255,116,184,.08), transparent 60%), radial-gradient(500px 140px at 100% 0%, rgba(73,210,255,.06), transparent 60%); border: 1px solid var(--i360-border); border-radius: var(--i360-card-r); padding: 22px; box-shadow: 0 12px 36px rgba(0,0,0,.28); transition: box-shadow var(--i360-t), border-color var(--i360-t), transform var(--i360-t); } .i360-card:hover { box-shadow: 0 20px 52px rgba(0,0,0,.40); border-color: rgba(255,255,255,.20); transform: translateY(-2px); } .i360-card h1, .i360-card h2, .i360-card h3, .i360-card h4, .i360-card h5, .i360-card h6 { color: var(--i360-text) !important; -webkit-text-fill-color: var(--i360-text) !important; } .i360-card h1 .i360-grad, .i360-card h2 .i360-grad, .i360-card h3 .i360-grad { background: var(--i360-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .i360-card p, .wp-block-column.i360-card p { color: var(--i360-muted) !important; } .i360-card--accent, .wp-block-column.i360-card--accent { background: var(--i360-grad-45) !important; border-color: transparent !important; } .i360-card--accent h1, .i360-card--accent h2, .i360-card--accent h3, .i360-card--accent h4, .i360-card--accent p, .i360-card--accent span { color: #07101E !important; -webkit-text-fill-color: #07101E !important; } .i360-card--accent .wp-block-button.i360-btn-ghost .wp-block-button__link { color: #07101E !important; -webkit-text-fill-color: #07101E !important; border-color: rgba(0,0,0,.20) !important; background: rgba(0,0,0,.10) !important; } .i360-card--glow { border: 1px solid transparent !important; background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box, var(--i360-grad) border-box !important; } /* ── Stats ──────────────────────────────────────────── */ .i360-stat-row.wp-block-columns { gap: 14px !important; } .i360-stat, .wp-block-column.i360-stat { background: rgba(255,255,255,.06); border: 1px solid var(--i360-border); border-radius: var(--i360-card-r); padding: 24px; } .i360-stat__n { font-family: 'Syne', system-ui, sans-serif; font-size: clamp(36px, 5vw, 52px); font-weight: 900; line-height: 1; background: var(--i360-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: block; margin: 0 0 8px; } .i360-stat__l { font-size: 15px; color: var(--i360-muted); margin: 0; display: block; } /* ── Sections ───────────────────────────────────────── */ .i360-section { padding-block: clamp(56px, 8vw, 112px); } .i360-section--stats { padding-block: clamp(40px, 6vw, 72px); } .i360-section h2 .i360-grad, .i360-section h3 .i360-grad { background: var(--i360-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Hero ───────────────────────────────────────────── */ .i360-hero { padding-block: clamp(80px, 10vw, 150px); } .i360-hero h1 .i360-grad { background: var(--i360-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── CTA section ────────────────────────────────────── */ .i360-cta-section { padding-block: clamp(64px, 9vw, 120px); text-align: center; position: relative; } .i360-cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60vw 60vh at 50% 50%, rgba(139,92,246,.12), transparent 70%); pointer-events: none; } .i360-cta-section h2 .i360-grad { background: var(--i360-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Card grid ──────────────────────────────────────── */ .i360-card-row.wp-block-columns { gap: 18px !important; } /* ── App shell (private pages) ──────────────────────── */ .i360-main.i360-app { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(40px, 6vw, 80px); } .i360-plugin-zone { /* The slot that plugin shortcodes (Profile Lab, Weekly Engine, etc.) render into on app-shell pages. Kept deliberately sparse so the plugin's own styling (UI Kit tokens) owns the look. */ } /* ── Footer ─────────────────────────────────────────── */ .i360-footer { border-top: 1px solid var(--i360-border); padding-block: clamp(48px, 6vw, 80px) 36px; background: rgba(5,6,13,.88); } .i360-footer__grid { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); justify-content: space-between; align-items: flex-start; margin-bottom: 40px; } .i360-footer__brand { flex: 0 0 260px; } .i360-footer__desc { color: var(--i360-muted); margin-top: 10px; font-size: 15px; } .i360-footer__col { flex: 0 0 160px; } .i360-footer__col h6 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--i360-muted); margin-bottom: 14px; } .i360-footer__nav.wp-block-list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .i360-footer__nav li { margin: 0 !important; } .i360-footer__nav a, .i360-footer__nav li a { display: block; font-size: 15px; color: var(--i360-muted) !important; padding: 5px 0; transition: color var(--i360-t); } .i360-footer__nav a:hover { color: var(--i360-text) !important; } .i360-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--i360-border); padding-top: 20px; } .i360-footer__bottom p { margin: 0; color: var(--i360-muted); font-size: 13px; } /* Minimal footer for app pages */ .i360-footer--app { padding-block: 24px; text-align: center; font-size: 13px; color: var(--i360-muted); } /* ── 404 ────────────────────────────────────────────── */ .i360-404 { padding-block: clamp(80px, 12vw, 160px); text-align: center; } .i360-404__num { font-family: 'Syne', system-ui, sans-serif; font-size: clamp(80px, 14vw, 160px); font-weight: 900; line-height: 1; background: var(--i360-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; margin: 0 0 16px; } /* ── Post cards ─────────────────────────────────────── */ .i360-post-card { background: var(--i360-surface); border: 1px solid var(--i360-border); border-radius: var(--i360-card-r); overflow: hidden; transition: border-color var(--i360-t), box-shadow var(--i360-t); } .i360-post-card:hover { border-color: rgba(255,255,255,.22); box-shadow: 0 12px 32px rgba(0,0,0,.32); } /* ── Forms ──────────────────────────────────────────── */ input, textarea, select { background: rgba(255,255,255,.06); border: 1px solid var(--i360-border); border-radius: 14px; color: var(--i360-text); font: inherit; padding: 12px 16px; width: 100%; transition: border-color var(--i360-t), box-shadow var(--i360-t); outline: none; } input:focus, textarea:focus, select:focus { border-color: transparent; box-shadow: var(--i360-focus); } input::placeholder, textarea::placeholder { color: var(--i360-muted); } /* ── Skip link ──────────────────────────────────────── */ .skip-link { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 9999; width: auto; height: auto; padding: 12px 20px; background: var(--i360-violet); color: #FFFFFF; border-radius: 8px; font-weight: 700; } /* ── WP block resets ────────────────────────────────── */ .wp-block-group { margin-block: 0 !important; } .wp-block-columns { gap: 18px; } .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) { display: flex; align-items: center; } /* ── Scrollbar ──────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--i360-bg2); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); } /* ════════════════════════════════════════════════════════ LIGHT MODE — data-theme="light" on ════════════════════════════════════════════════════════ */ [data-theme="light"] { --i360-bg: #FFFFFF; --i360-bg2: #F4F7FF; --i360-surface: rgba(22,24,42,.05); --i360-surface-2:rgba(22,24,42,.04); --i360-border: rgba(22,24,42,.10); --i360-text: #14182A; --i360-muted: #57607F; --i360-hdr-bg: rgba(255,255,255,.92); /* Darken cyan for contrast on white */ --i360-cyan: #1A7FA0; } [data-theme="light"] body { background-color: #FFFFFF; background-image: radial-gradient(54vw 44vh at 6% 10%, rgba(255,116,184,.09), transparent 62%), radial-gradient(56vw 48vh at 84% 12%, rgba(139,92,246,.11), transparent 60%), radial-gradient(48vw 42vh at 80% 78%, rgba(26,127,160,.07), transparent 60%), linear-gradient(180deg,#FFFFFF,#F4F7FF 64%,#EEF2FF); color: #14182A; } [data-theme="light"] .i360-card, [data-theme="light"] .wp-block-column.i360-card { background: rgba(255,255,255,.92) !important; border-color: rgba(22,24,42,.12) !important; box-shadow: 0 2px 16px rgba(22,24,42,.08) !important; } [data-theme="light"] .i360-card h1, [data-theme="light"] .i360-card h2, [data-theme="light"] .i360-card h3 { color: #14182A !important; -webkit-text-fill-color: #14182A !important; } [data-theme="light"] .i360-card p { color: #57607F !important; } [data-theme="light"] .i360-stat, [data-theme="light"] .wp-block-column.i360-stat { background: rgba(255,255,255,.90) !important; border-color: rgba(22,24,42,.12) !important; } [data-theme="light"] .i360-stat__l { color: #57607F !important; } [data-theme="light"] .wp-block-button.i360-btn-ghost .wp-block-button__link { background: rgba(22,24,42,.05) !important; color: #14182A !important; -webkit-text-fill-color: #14182A !important; border-color: rgba(22,24,42,.15) !important; } [data-theme="light"] .wp-block-button.i360-btn-ghost .wp-block-button__link:hover { background: rgba(22,24,42,.09) !important; } [data-theme="light"] .i360-footer { background: rgba(240,243,255,.94); border-top-color: rgba(22,24,42,.10); } [data-theme="light"] .i360-footer__bottom { border-top-color: rgba(22,24,42,.10); } [data-theme="light"] .i360-footer__desc, [data-theme="light"] .i360-footer__bottom p, [data-theme="light"] .i360-footer__nav a { color: #57607F !important; } [data-theme="light"] .i360-nav .wp-block-navigation-item__content, [data-theme="light"] .i360-nav a { color: #57607F !important; -webkit-text-fill-color: #57607F !important; } [data-theme="light"] .i360-nav .wp-block-navigation-item__content:hover, [data-theme="light"] .i360-nav a:hover { color: #14182A !important; -webkit-text-fill-color: #14182A !important; background: rgba(22,24,42,.06); } [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: rgba(22,24,42,.04); border-color: rgba(22,24,42,.12); color: #14182A; } /* ════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .i360-footer__grid { gap: 24px; } } @media (max-width: 768px) { :root { --i360-hdr-h: 60px; } .i360-card-row.wp-block-columns, .i360-stat-row.wp-block-columns { flex-direction: column !important; gap: 12px !important; } .i360-footer__grid { flex-direction: column; gap: 28px; } .i360-footer__brand, .i360-footer__col { flex: none; width: 100%; } } @media (max-width: 480px) { .i360-hero { padding-block: 56px 40px; } .i360-section { padding-block: 48px; } .wp-block-buttons { flex-direction: column !important; align-items: flex-start !important; } } /* ── Reduced motion ────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .i360-card:hover, .wp-block-button.i360-btn-primary .wp-block-button__link:hover { transform: none; } } body, .i360-header, .i360-main, .i360-footer { overflow-x: hidden; }