/* ============================================================ RANKRIX: ELEMENTOR WIDGETS (home page sections) Hero · Technology stack, plus the shared section shell, heading, buttons and glass that the fallback templates (index.php, 404.php) also use. Loaded on every page. Consistency with the locked chrome: - buttons ARE the header buttons (.rkx-btn --primary/--ghost from rkx-header.css: 34px, Inter, indigo + shimmer sweep + glow) — this file adds nothing to them except the magnetic hook - surfaces use the chrome's frosted-glass recipe (--rkx-bg-menu tint, blur 28px saturate 1.7, --rkx-border, inset highlight); containers never react to hover; only controls (tabs, tiles, buttons) do; no shimmer sweeps anywhere - eyebrows follow the footer pane eyebrow (10px/700, .16em, #818cf8, pulsing square dot); radius 1px everywhere; no circles, no grain - the neon #4453FF lines / brackets / flare come from the loader Motion (rkx-widgets.js, GSAP): word-by-word titles, magnetic buttons, the hero chart that draws itself, figures that count up with fill bars, the stack tiles' gentle bob and the package panel morph. Everything degrades to static without JS / reduced motion. ============================================================ */ .rkx-w { --w-glass: var(--rkx-bg-menu, rgba(21, 22, 26, 0.6)); --w-border: var(--rkx-border, rgba(243, 239, 230, 0.10)); --w-ghost-b: var(--rkx-ghost-b, rgba(243, 239, 230, 0.14)); --w-ghost-bg: var(--rkx-ghost-bg, rgba(243, 239, 230, 0.06)); --w-accent: var(--rkx-accent, #1F39C2); --w-accent-h: var(--rkx-accent-h, #2C48DD); --w-accent-b: var(--rkx-accent-b, rgba(31, 57, 194, 0.55)); --w-accent-glow: var(--rkx-accent-glow, rgba(31, 57, 194, 0.45)); --w-accent-tx: var(--rkxf-accent-tx, #818cf8); /* the footer's periwinkle (rkx-chrome overrides --rkx-accent-tx with deep indigo) */ --w-neon: #4453FF; /* Body text and small labels used to sit at 62% and 26% white, which reads as grey on the dark glass and measured 2.2:1 for the labels, under the 4.5:1 floor. Both are lifted: paragraphs are now close to white and labels are clearly legible, while still sitting below pure white so the hierarchy survives. */ --w-muted: rgba(243, 239, 230, 0.88); --w-dim: rgba(243, 239, 230, 0.60); --w-r: var(--rkx-radius, 1px); --w-ease: var(--rkx-ease, cubic-bezier(0.22, 1, 0.36, 1)); --w-fast: var(--rkx-fast, 280ms); --w-font: var(--rkx-font, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); --w-disp: var(--rkx-font-heading, 'Saira', 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); /* Settings → Typography → Display. Saira: squared, like the wordmark */ --w-mono: var(--rkxf-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace); --w-shimmer: linear-gradient(115deg, transparent 0%, transparent 35%, rgba(243, 239, 230,0.28) 50%, transparent 65%, transparent 100%); --w-tint: linear-gradient(135deg, rgba(31, 57, 194, 0.18) 0%, rgba(243, 239, 230, 0.05) 55%, rgba(31, 57, 194, 0.14) 100%); --w-tint-h: linear-gradient(135deg, rgba(31, 57, 194, 0.28) 0%, rgba(243, 239, 230, 0.07) 55%, rgba(31, 57, 194, 0.20) 100%); --big: var(--rkx-big, 1); color: #F3EFE6; font-family: var(--w-font); -webkit-font-smoothing: antialiased; } .rkx-w, .rkx-w *, .rkx-w *::before, .rkx-w *::after { box-sizing: border-box; } /* ---------- section shell ---------- */ .rkx-sec { position: relative; } .rkx-sec--chrome { width: var(--rkx-w-def, 95%); max-width: var(--rkx-max, 1400px); margin-inline: auto; } .rkx-sec--full { width: 100%; } .rkx-sec--pad-regular { padding-block: clamp(48px, 7vw, 104px); } .rkx-sec--pad-compact { padding-block: clamp(28px, 4vw, 56px); } .rkx-sec--pad-spacious { padding-block: clamp(72px, 10vw, 150px); } .rkx-sec--pad-none { padding-block: 0; } /* ---------- heading block (footer-pane eyebrow, display title, outlined accent) ---------- */ .rkx-w-head { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 52px); } .rkx-sec--center .rkx-w-head { margin-inline: auto; text-align: center; } .rkx-w-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--w-font); font-size: calc(10px * var(--big)); font-weight: 700; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: var(--w-accent-tx); } .rkx-w-eyebrow__t { display: inline-block; min-width: 1ch; } .rkx-w-eyebrow i { width: 6px; height: 6px; border-radius: 1px; background: var(--w-accent-tx); box-shadow: 0 0 8px var(--w-accent-glow); animation: rkxWPulse 2.4s var(--w-ease) infinite; } @keyframes rkxWPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .rkx-w-title { margin: 0; font-family: var(--w-disp); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; color: #F3EFE6; text-wrap: balance; font-size: calc(clamp(28px, 3.4vw, 46px) * var(--big)); } h1.rkx-w-title { font-size: calc(clamp(36px, 5.2vw, 74px) * var(--big)); line-height: 1.02; letter-spacing: -0.035em; } h3.rkx-w-title, h4.rkx-w-title { font-size: calc(clamp(22px, 2.4vw, 30px) * var(--big)); } .rkx-wd { display: inline-block; will-change: transform, opacity; } /* JS splits titles into words for the stagger */ /* ---------- heading accent words: bold, filled, neon blue (whole site) ---------- The locked chrome stylesheet draws the accent word in every headline as outlined type: transparent fill with a thin indigo stroke. The owner asked for it bold, filled and neon blue everywhere. The chrome file is not edited: this overrides it, and the type selector (span.) out-ranks the chrome's class selector so the result does not depend on which stylesheet happens to load last. Colour comes from the chrome's own neon recipe, --rkx-neon #4453FF for the glow and a lighter core of the same hue for the letters, so the word reads as a lit tube and matches the neon buttons. The core measures about 6.5:1 against the dark glass, comfortably above the 3:1 needed for large text. The glow is static: nothing here animates. */ span.rkx-h1__accent, span.rkx-h2__accent { color: #7B8BFF !important; -webkit-text-fill-color: #7B8BFF; -webkit-text-stroke: 0 transparent; text-stroke: 0 transparent; paint-order: normal; font-weight: 700 !important; font-style: normal !important; text-shadow: 0 0 1px rgba(170, 182, 255, 0.85), 0 0 8px rgba(68, 83, 255, 0.85), 0 0 22px rgba(68, 83, 255, 0.55), 0 0 46px rgba(31, 57, 194, 0.45); } .rkx-w-intro { margin: 16px 0 0; max-width: 60ch; font-size: calc(clamp(15px, 1.1vw, 18px) * var(--big)); line-height: 1.65; color: var(--w-muted); } .rkx-sec--center .rkx-w-intro { margin-inline: auto; } /* ---------- buttons: the header's .rkx-btn, untouched; only the row + magnet hook ---------- */ .rkx-w-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; } .rkx-sec--center .rkx-w-actions { justify-content: center; } .rkx-w .rkx-btn { width: auto; min-width: 0 !important; padding-inline: 18px; } /* the chrome pins .rkx-btn to the header's fixed auth width; page buttons size to their label */ .rkx-w .rkx-btn--ghost { display: inline-flex; } /* the header hides its ghost button on phones; ours stay */ .rkx-w-btn { will-change: transform; } /* ---------- frosted glass (chrome recipe) + footer-pane hover ---------- */ .rkx-glass { position: relative; overflow: hidden; background: var(--w-glass); border: 1px solid var(--w-border); border-radius: var(--w-r); backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(243, 239, 230, 0.05) inset; transition: border-color 450ms var(--w-ease), box-shadow 500ms var(--w-ease), background-image 450ms var(--w-ease); } .rkx-glass > * { position: relative; z-index: 1; } /* ---------- hero ---------- */ .rkx-hero .rkx-w-head { max-width: 900px; margin-bottom: 0; } .rkx-hero .rkx-w-intro { max-width: 62ch; margin-top: 24px; font-size: calc(clamp(16px, 1.3vw, 20px) * var(--big)); line-height: 1.6; } .rkx-hero .rkx-w-actions { margin-top: 34px; } /* ---------- figure bar: the thin line under each hero figure fills while its number counts up (countAll) ---------- */ .rkx-stat__bar { display: block; order: -1; height: 1px; margin-top: 4px; background: var(--w-border); overflow: hidden; } .rkx-stat__bar b { display: block; height: 100%; width: 0; background: var(--rkx-grad-90, linear-gradient(90deg, #1F39C2, #4D5DFF)); box-shadow: 0 0 8px var(--w-accent-glow); } html.rkx-js.rkx-nogsap .rkx-sec.is-in .rkx-stat__bar b { width: 100%; transition: width 1.4s var(--w-ease); } /* ---------- tech stack: bento of four glass cells — intro · disciplines · stack tiles · package panel ---------- */ .rkx-bento { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-areas: "intro tabs" "grid detail"; gap: clamp(10px, 1.2vw, 14px); } .rkx-bento__cell { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 2vw, 26px); } .rkx-stack__intro { grid-area: intro; justify-content: center; } .rkx-stack__intro .rkx-w-head { margin-bottom: 0; max-width: none; } .rkx-stack__intro .rkx-w-title { font-size: calc(clamp(24px, 2.4vw, 34px) * var(--big)); } .rkx-stack__intro .rkx-w-intro { font-size: calc(clamp(13.5px, 1vw, 15px) * var(--big)); margin-top: 12px; } .rkx-stack__tabs { grid-area: tabs; justify-content: center; } .rkx-stack__grid-cell { grid-area: grid; } .rkx-stack__detail { grid-area: detail; position: relative; justify-content: center; min-height: 336px; } .rkx-stack__lab { margin: 0 0 10px; font-family: var(--w-font); font-size: calc(10px * var(--big)); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--w-dim); } /* discipline tabs = the footer pill's item buttons */ .rkx-stack__tablist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .rkx-stack__tab { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 11px; text-align: left; font-family: var(--w-font); font-size: calc(clamp(11px, 0.95vw, 13px) * var(--big)); font-weight: 600; line-height: 1; color: rgba(243, 239, 230,0.78); background: transparent; border: 1px solid var(--w-border); border-radius: var(--w-r); cursor: pointer; transition: color var(--w-fast) var(--w-ease), background var(--w-fast) var(--w-ease), border-color var(--w-fast) var(--w-ease), box-shadow var(--w-fast) var(--w-ease); } .rkx-stack__tab:hover { color: #F3EFE6; background: var(--w-ghost-bg); } .rkx-stack__tab.is-on { color: #F3EFE6; background: rgba(31, 57, 194, 0.18); border-color: var(--w-accent-b); box-shadow: 0 0 0 1px var(--w-accent-b), 0 12px 30px -14px var(--w-accent); } .rkx-stack__tab:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; } .rkx-stack__count { font-family: var(--w-disp); font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 1px; background: rgba(243, 239, 230,0.08); color: var(--w-dim); transition: background var(--w-fast) var(--w-ease), color var(--w-fast) var(--w-ease); } .rkx-stack__tab.is-on .rkx-stack__count { background: rgba(31, 57, 194, 0.55); color: #F3EFE6; } /* stack tiles: brand colour on the selected one, gentle bob */ .rkx-stack__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 2px; } .rkx-stack__grid[hidden] { display: none; } .rkx-stack__tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 11px; text-align: left; overflow: hidden; font: inherit; color: #F3EFE6; background: var(--w-ghost-bg); border: 1px solid var(--w-border); border-radius: var(--w-r); cursor: pointer; transition: border-color 300ms var(--w-ease), transform 300ms var(--w-ease), box-shadow 300ms var(--w-ease), background 300ms var(--w-ease); animation: rkxWBob 4s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes rkxWBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .rkx-stack__tile:hover { transform: translateY(-5px); border-color: var(--w-ghost-b); background: rgba(243, 239, 230,0.08); } .rkx-stack__tile:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; } .rkx-stack__tile.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: 0 0 0 1px var(--c), 0 10px 18px -10px color-mix(in srgb, var(--c) 75%, transparent), 0 14px 26px -16px color-mix(in srgb, var(--c) 50%, transparent); animation-play-state: paused; transform: translateY(-4px) scale(1.015); } .rkx-stack__badge { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: rgba(243, 239, 230,0.04); border-radius: var(--w-r); transition: background 300ms var(--w-ease); } .rkx-stack__tile.is-on .rkx-stack__badge { background: color-mix(in srgb, var(--c) 16%, transparent); } .rkx-stack__badge img, .rkx-stack__pkg-badge img { width: 60%; height: 60%; object-fit: contain; display: block; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 55%, transparent)); } .rkx-stack__badge i, .rkx-stack__pkg-badge i { display: none; font-family: var(--w-disp); font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; color: var(--c); } .rkx-stack__badge.is-missing img, .rkx-stack__pkg-badge.is-missing img { display: none; } .rkx-stack__badge.is-missing i, .rkx-stack__pkg-badge.is-missing i { display: block; } .rkx-stack__tile-name { font-family: var(--w-font); font-size: calc(11.5px * var(--big)); font-weight: 600; line-height: 1.25; color: #F3EFE6; } /* package panel: brand glow, logo, inclusions in two columns, fit chips + the theme button */ .rkx-stack__pkg { position: relative; display: flex; flex-direction: column; justify-content: center; } .rkx-stack__pkg[hidden] { display: none; } .rkx-stack__pkg.is-morph { animation: rkxWMorph 420ms var(--w-ease); } @keyframes rkxWMorph { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .rkx-stack__glow { position: absolute; inset: calc(-1 * clamp(18px, 2vw, 26px)); pointer-events: none; opacity: 0.85; background: radial-gradient(260px 170px at 100% 0%, color-mix(in srgb, var(--c) 60%, transparent), transparent 62%); transition: opacity 400ms var(--w-ease); } .rkx-stack__top { position: relative; display: flex; gap: 16px; align-items: center; margin-bottom: 18px; } .rkx-stack__pkg-badge { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; background: rgba(243, 239, 230,0.06); border: 1px solid var(--c); border-radius: var(--w-r); } .rkx-stack__pkg-badge img { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 75%, transparent)); } .rkx-stack__pkg-badge i { font-size: 15px; } .rkx-stack__pkg-name { margin: 0; font-family: var(--w-disp); font-size: calc(clamp(20px, 1.8vw, 27px) * var(--big)); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--c); } .rkx-stack__pkg-sub { margin: 4px 0 0; font-size: calc(14px * var(--big)); color: var(--w-dim); } .rkx-stack__inc { position: relative; list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 22px; } .rkx-stack__inc li { position: relative; padding-left: 22px; font-size: calc(15px * var(--big)); line-height: 1.3; color: rgba(243, 239, 230,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rkx-stack__inc li::before { content: '\203A'; position: absolute; left: 0; top: -2px; color: var(--c); font-weight: 700; font-size: 17px; } .rkx-stack__fit { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rkx-stack__fit span { font-size: calc(12.5px * var(--big)); padding: 6px 12px; background: rgba(243, 239, 230,0.05); border: 1px solid var(--w-border); border-radius: var(--w-r); color: var(--w-dim); } .rkx-stack__fit .rkx-btn { margin-left: auto; } @media (max-width: 1024px) { .rkx-bento { grid-template-columns: 1fr; grid-template-areas: "intro" "tabs" "grid" "detail"; } .rkx-stack__detail { min-height: 0; } } @media (max-width: 560px) { .rkx-stack__tablist { grid-template-columns: repeat(2, 1fr); } .rkx-stack__grid { grid-template-columns: repeat(2, 1fr); } .rkx-stack__inc { grid-template-columns: 1fr; } .rkx-stack__inc li { white-space: normal; } .rkx-bento__cell { padding: 16px; } .rkx-stack__fit .rkx-btn { margin-left: 0; width: 100%; } } @media (max-width: 380px) { .rkx-stack__tablist, .rkx-stack__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .rkx-stack__tile { animation: none !important; } .rkx-stack__pkg.is-morph { animation: none !important; } } /* ---------- hero: growth console (chart draws, KPIs count, stages light) ---------- */ .rkx-console { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 16px; } .rkx-console__bar { display: flex; align-items: center; gap: 10px; font-family: var(--w-font); font-size: calc(10.5px * var(--big)); font-weight: 700; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; color: rgba(243, 239, 230,0.8); } .rkx-console__bar span { margin-left: auto; font-family: var(--w-mono); font-weight: 500; font-size: calc(10.5px * var(--big)); letter-spacing: 0.06em; text-transform: none; color: var(--w-dim); } .rkx-console__dot { width: 6px; height: 6px; border-radius: 1px; background: #3BD682; box-shadow: 0 0 8px #3BD682; animation: rkxWPulse 1.8s ease-in-out infinite; } .rkx-console__chart { display: block; width: 100%; height: clamp(90px, 9vw, 130px); overflow: visible; } .rkx-console__grid path { fill: none; stroke: rgba(243, 239, 230,0.08); stroke-width: 1; } .rkx-console__area { fill: rgba(68, 83, 255, 0.18); opacity: 0; transition: opacity 900ms ease 1.3s; } .rkx-console__line { fill: none; stroke: var(--w-neon); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(68,83,255,0.9)); } .rkx-console__tip { fill: #F3EFE6; opacity: 0; } .rkx-sec.is-live .rkx-console__line { animation: rkxWDraw 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; } .rkx-sec.is-live .rkx-console__area { opacity: 1; } .rkx-sec.is-live .rkx-console__tip { animation: rkxWFade 0.4s ease 1.9s forwards; } @keyframes rkxWDraw { to { stroke-dashoffset: 0; } } @keyframes rkxWFade { to { opacity: 1; } } .rkx-console__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; } .rkx-console__kpi { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: rgba(243, 239, 230,0.04); border: 1px solid var(--w-border); border-radius: var(--w-r); min-width: 0; } .rkx-console__kpi dd { order: 1; margin: 0; display: flex; align-items: baseline; gap: 1px; font-family: var(--w-disp); font-size: calc(clamp(20px, 1.8vw, 26px) * var(--big)); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: #F3EFE6; font-variant-numeric: tabular-nums; } .rkx-console__kpi dd small { font-size: 0.55em; color: var(--w-accent-tx); } .rkx-console__kpi dt { order: 2; font-size: calc(11px * var(--big)); line-height: 1.3; color: var(--w-muted); } .rkx-console__kpi .rkx-stat__bar { order: 3; margin-top: 4px; } @media (max-width: 560px) { .rkx-console__kpis { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .rkx-console__line, .rkx-console__tip, .rkx-console__dot { animation: none !important; } .rkx-console__line { stroke-dashoffset: 0 !important; } .rkx-console__area, .rkx-console__tip { opacity: 1 !important; } } /* ---------- hero goal switcher (segmented control above the H1) ---------- */ .rkx-goals { display: flex; width: max-content; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 18px; /* block-level: never shares a line with the eyebrow (it did between ~640 and 1024px) */ padding: 4px; border: 1px solid var(--w-border); border-radius: var(--w-r); background: rgba(0, 0, 0, 0.35); } .rkx-goals__btn { padding: 8px 12px; font-family: var(--w-font); font-size: calc(12.5px * var(--big)); font-weight: 600; line-height: 1; color: rgba(243, 239, 230,0.72); background: transparent; border: 1px solid transparent; border-radius: var(--w-r); cursor: pointer; transition: color var(--w-fast) var(--w-ease), background var(--w-fast) var(--w-ease), border-color var(--w-fast) var(--w-ease); } .rkx-goals__btn:hover { color: #F3EFE6; background: var(--w-ghost-bg); } .rkx-goals__btn.is-on { color: #F3EFE6; background: rgba(31, 57, 194, 0.35); border-color: var(--w-accent-b); box-shadow: 0 0 0 1px var(--w-accent-b); } .rkx-goals__btn:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; } @media (max-width: 560px) { .rkx-goals { width: 100%; } } /* ---------- reveal states (JS adds html.rkx-js; GSAP animates, or CSS transitions when GSAP is absent) ---------- */ html.rkx-js .rkx-sec:not(.is-in) [data-rkx-reveal], html.rkx-js .rkx-sec:not(.is-in) .rkx-w-head > *, html.rkx-js .rkx-sec:not(.is-in) .rkx-w-actions { opacity: 0; } html.rkx-js.rkx-nogsap .rkx-sec [data-rkx-reveal], html.rkx-js.rkx-nogsap .rkx-sec .rkx-w-head > *, html.rkx-js.rkx-nogsap .rkx-sec .rkx-w-actions { transition: opacity 700ms var(--w-ease), transform 700ms var(--w-ease); } html.rkx-js.rkx-nogsap .rkx-sec:not(.is-in) [data-rkx-reveal] { transform: translateY(14px); } /* ---------- breakpoints ---------- */ @media (max-width: 640px) { .rkx-w-actions .rkx-btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .rkx-w-eyebrow i { animation: none !important; } .rkx-glass, .rkx-glass::after { transition: none !important; } html.rkx-js .rkx-sec [data-rkx-reveal], html.rkx-js .rkx-sec .rkx-w-head > *, html.rkx-js .rkx-sec .rkx-w-actions { opacity: 1; transform: none; } } /* ---------- hero: full-screen glass explorer ---------- One frosted panel (the console card's own surface, .rkx-glass) fills the first screen: 12 px under the header pill, 12 px above the bottom of the viewport, as wide as the pills (rkx-widgets.js heroFit() measures the real positions and pads the bottom so nothing hides under the footer pill). Inside: the studio headline with the goal switcher beside it, then a grid — LEFT the selected stack's copy, RIGHT the stacks for that goal with their tools (top) and the stack's live widget (bottom). Below 960 px it stacks: headline → goals → stacks → copy → widget. */ /* ============================================================ HERO — two containers side by side LEFT (.rkx-hero__left) : brand block at the top, the approach's headline, copy and buttons at the bottom. RIGHT (.rkx-hero__right) : goal tab bar, approach tab bar, then the numbers box filling what is left. Together they fill the first screen: 12 px under the header pill, 12 px above the bottom of the viewport (heroFit() measures both). Every held block gets a min-height from heroX(), set to the tallest content any goal or approach puts in it, so a switch never changes the height of anything. ============================================================ */ .rkx-hero--panel { padding-block: 0 clamp(28px, 4vw, 56px); } .rkx-hero--duo .rkx-hero__split { --hero-top: calc(var(--rkx-top, 10px) + var(--rkx-h, 50px) + 12px); margin-top: calc(var(--hero-top) - clamp(70px, 10vh, 130px)); /* .rkx-main already pushes content down by this clamp (chrome) */ min-height: calc(100vh - var(--hero-top) - 12px); min-height: calc(100svh - var(--hero-top) - 12px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 1vw, 16px); align-items: stretch; } .rkx-hero__side { display: flex; flex-direction: column; min-width: 0; gap: clamp(12px, 1.8vh, 20px); padding: clamp(16px, 2.4vh, 30px) clamp(18px, 2.2vw, 36px); padding-bottom: calc(var(--hero-foot, 0px) + clamp(16px, 2.4vh, 30px)); /* content stays clear of the fixed footer pill */ overflow: visible; } /* ---------- left ---------- */ .rkx-hero__brand { min-width: 0; } .rkx-hero__brand .rkx-w-eyebrow { margin: 0; } .rkx-hero__studio { margin: 7px 0 0; font-family: var(--w-font); font-size: calc(10.5px * var(--big)); font-weight: 700; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: #F3EFE6; } /* the studio line: the same small type as the eyebrow above it */ .rkx-hero__brand .rkx-w-intro { margin: 12px 0 0; max-width: 46ch; font-size: calc(clamp(14px, 1.05vw, 16.5px) * var(--big)); line-height: 1.5; color: #F3EFE6; text-wrap: balance; } /* balanced, so no single word is left alone on the last line */ /* The left column reads as one block: label, lead, headline, paragraph, chips, buttons, with nothing opening a gap in the middle of it. The group is centred in the container so the spare room sits evenly above and below rather than pooling in one place. The copy block's own height is held at the tallest approach, so the buttons never jump. */ .rkx-hero__left { justify-content: center; } .rkx-hero__copy { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px); min-width: 0; } .rkx-hero__copy .rkx-w-actions { margin-top: 0; padding-top: 6px; } .rkx-hero__h2 { margin: 0; font-family: var(--w-disp); font-size: calc(clamp(30px, min(4.1vw, 6.2vh), 62px) * var(--big)); font-weight: 700; line-height: 1.03; letter-spacing: -0.012em; color: #F3EFE6; text-wrap: balance; } /* the page's headline (H1 by default). Saira is squarer than Sora, so it needs less negative tracking */ .rkx-hero__text { margin: 0; max-width: 58ch; font-size: calc(clamp(15px, min(1.1vw, 2.1vh), 18px) * var(--big)); line-height: 1.6; color: rgba(243, 239, 230, 0.92); } /* ---------- right ---------- */ .rkx-hero__right { container: rkxhero / inline-size; } .rkx-hero__bar { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .rkx-hero__lab { margin: 0; font-family: var(--w-font); font-size: calc(10.5px * var(--big)); font-weight: 700; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; color: rgba(243, 239, 230, 0.72); } .rkx-hero__lab b { color: var(--w-accent-tx); font-weight: 700; } /* Both tab bars are the same full-width control: equal columns, one per tab, across the whole container at every size. --n is the number of tabs, set by the markup and by the script when a goal brings a different number of approaches. */ .rkx-hero .rkx-hero__tabbar { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; width: 100%; max-width: none; margin: 0; padding: 4px; border: 1px solid var(--w-border); border-radius: var(--w-r); background: rgba(0, 0, 0, 0.35); } .rkx-hero .rkx-hero__tabbar > button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: calc(38px * var(--big)); padding: 8px 10px; margin: 0; text-align: center; font-family: var(--w-font); font-size: calc(12.5px * var(--big)); font-weight: 600; line-height: 1.25; letter-spacing: 0; color: rgba(243, 239, 230, 0.86); background: transparent; border: 1px solid transparent; border-radius: var(--w-r); cursor: pointer; transition: color var(--w-fast) var(--w-ease), background var(--w-fast) var(--w-ease), border-color var(--w-fast) var(--w-ease), box-shadow var(--w-fast) var(--w-ease); } .rkx-hero .rkx-hero__tabbar > button { position: relative; overflow: hidden; } /* The tour's countdown: the line runs out under the live tab as the next approach comes up, so a switch is never a surprise. rkx-widgets.js animates it and pauses it; at rest it is nothing. */ .rkx-hero__dwell { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--w-neon); box-shadow: 0 0 8px rgba(68, 83, 255, 0.9); transform: scaleX(0); transform-origin: left; pointer-events: none; } .rkx-hero .rkx-hero__tabbar > button:hover { color: #F3EFE6; background: var(--w-ghost-bg); } .rkx-hero .rkx-hero__tabbar > button.is-on { color: #F3EFE6; background: rgba(31, 57, 194, 0.35); border-color: var(--w-accent-b); box-shadow: 0 0 0 1px var(--w-accent-b); } .rkx-hero .rkx-hero__tabbar > button:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; } /* Both bars now carry single words, so the approach bar holds one row beside the goal bar right down to a phone. Only a genuinely tiny container drops it to two columns, which is still full width. (This was 520px, from when the approach labels were phrases like "PR & thought leadership".) */ @container rkxhero (max-width: 380px) { .rkx-hero__approach .rkx-hero__tabbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container rkxhero (max-width: 340px) { .rkx-hero .rkx-hero__tabbar > button { padding: 7px 5px; font-size: 11.5px; } } .rkx-hero__box { background: rgba(243, 239, 230,0.035); border: 1px solid var(--w-border); border-radius: var(--w-r); padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.4vw, 20px); min-width: 0; } .rkx-hero__viz { flex: 1 1 auto; display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); min-height: 0; } .rkx-hero__viz.rkx-console { max-width: none; } /* a generic tablet rule caps consoles at 560px; in the hero it fills its container */ .rkx-hero__viz > .rkx-hero__lab { margin: 0; } .rkx-hero__viz .rkx-console__bar b { flex: none; } .rkx-hero__viz .rkx-console__chart { flex: 1 1 0; height: 0; min-height: 72px; max-height: 34vh; } .rkx-hero__viz .rkx-console__line, .rkx-hero__viz .rkx-console__grid path { vector-effect: non-scaling-stroke; } .rkx-hero__viz .rkx-console__kpis { margin-top: auto; } /* figures sit at the foot, level with the buttons opposite */ .rkx-hero__viz .rkx-console__kpi { padding: clamp(8px, 1.2vh, 12px) 12px; } @media (max-height: 720px) { /* short laptop screens */ .rkx-hero__side { gap: 10px; } .rkx-hero__copy { gap: 10px; } .rkx-hero .rkx-hero__tabbar > button { min-height: 32px; padding: 6px 8px; } .rkx-hero__viz .rkx-console__chart { min-height: 56px; } .rkx-hero__viz .rkx-console__kpi { padding: 6px 10px; gap: 3px; } .rkx-hero__viz .rkx-console__kpi dd { font-size: calc(19px * var(--big)); } } /* Tablets and phones: the containers stack, left above right. Slack goes to the bottom rather than opening a gap between the lead sentence and the headline. */ @media (max-width: 960px) { .rkx-hero--duo .rkx-hero__split { grid-template-columns: minmax(0, 1fr); align-content: start; } .rkx-hero__left { padding-bottom: clamp(16px, 2.4vh, 30px); justify-content: flex-start; } /* only the lower container meets the footer pill */ .rkx-hero__viz .rkx-console__chart { min-height: 96px; max-height: 26vh; } } @media (max-width: 640px) { .rkx-hero__side { padding-inline: 16px; gap: 14px; } .rkx-hero__copy .rkx-w-actions .rkx-btn { flex: 1 1 auto; } .rkx-hero__viz .rkx-console__chart { min-height: 84px; max-height: 22vh; } .rkx-hero__viz .rkx-console__kpis { grid-template-columns: 1fr 1fr; } }