/* Theme Name: TrainMe4Tech Theme URI: https://trainme4tech.com Author: TrainMe4Tech Author URI: https://trainme4tech.com Description: Warm-minimal editorial block theme for TrainMe4Tech: enterprise IT consulting, training, and single-file AI apps. Ported from the Claude-designed static site ("International Leader" design system v2). Light default with a runtime dark mode, Bricolage Grotesque/Manrope/JetBrains Mono bundled locally, and full-site-editing templates and patterns for every homepage section. Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 7.4 Version: 0.18.7 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: trainme4tech Tags: full-site-editing, block-patterns, one-column, custom-colors, editor-style */ /* ============================================================ TrainMe4Tech - Design System v2 · "International Leader" TOKENS: theme.json is the source of truth. Everything below bridges --wp--preset--* / --wp--custom--* into the short custom properties the design system was written against, with literal fallbacks (a missing preset fails visible-safe). Color mode: LIGHT is the default (theme.json presets are the warm off-white set); runtime [data-theme="dark"] on redefines the PRESET vars, so every bridge follows automatically. WP prints global-styles CSS after this sheet; the dark block uses :root[data-theme="dark"] (0,2,0) so it outranks the :root preset definitions regardless of print order. ============================================================ */ :root { /* Brand accents - bridged from theme.json palette */ --orange: var(--wp--preset--color--accent, #FF6B2C); --orange-2: var(--wp--preset--color--accent-2, #FF8A4C); --orange-soft: var(--wp--preset--color--accent-soft, #E85A1F); --purple: var(--wp--preset--color--purple, #8E3FB8); --pink: var(--wp--preset--color--pink, #EC407A); --green: var(--wp--preset--color--green, #3BAA5E); --yellow: var(--wp--preset--color--yellow, #FFB300); --blue: var(--wp--preset--color--blue, #29B6F6); --grad: var(--wp--preset--gradient--brand, linear-gradient(120deg, #FF6B2C 0%, #F24175 50%, #8E3FB8 100%)); /* Surfaces / text */ --bg: var(--wp--preset--color--base, #FAFAF7); --bg-2: var(--wp--preset--color--base-2, #F4F3EE); --surface: var(--wp--preset--color--surface, #FFFFFF); --surface-2: var(--wp--preset--color--surface-2, #F8F7F2); --border: var(--wp--preset--color--border, #E5E3DC); --border-strong: var(--wp--preset--color--border-strong, #D1CFC8); --text: var(--wp--preset--color--contrast, #1C1C21); --text-muted: var(--wp--preset--color--text-muted, #6B6A72); --text-faint: var(--wp--preset--color--text-faint, #6E6D75); --ink: var(--wp--preset--color--ink, #141417); --ink-2: var(--wp--preset--color--ink-2, #1D1A22); /* Mode-local tokens (not palette entries) - light default */ --shadow-sm: 0 1px 2px rgba(28,28,33,.05), 0 2px 6px rgba(28,28,33,.04); --shadow: 0 6px 22px rgba(28,28,33,.07), 0 1px 4px rgba(28,28,33,.05); --shadow-lg: 0 12px 32px rgba(28,28,33,.08); --shadow-orange: 0 12px 32px rgba(255,107,44,.18); --shadow-purple: 0 16px 40px rgba(142,63,184,.15); --tint-orange: rgba(255,107,44,.08); --tint-purple: rgba(142,63,184,.07); --hairline: rgba(28,28,33,.08); --font-display: var(--wp--preset--font-family--display, Georgia, serif); --font-body: var(--wp--preset--font-family--body, system-ui, sans-serif); --font-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace); --r-sm: var(--wp--custom--radius--sm, 8px); --r: var(--wp--custom--radius--md, 12px); --r-lg: var(--wp--custom--radius--lg, 18px); --r-xl: var(--wp--custom--radius--xl, 26px); --ease: var(--wp--custom--ease, cubic-bezier(.2,.7,.2,1)); --ease2: var(--wp--custom--ease2, cubic-bezier(.4,0,.1,1)); --wrap: min(1280px, 92vw); /* enterprise marketing width (MS/Adobe tier) */ } /* Dark mode - redefines the PRESET slugs (skill: same-slug redefinition, never a parallel set) plus the mode-local tokens. Values are the charcoal set; brand orange (#FF6B2C, 5.97:1 on dark) is restored full-vibrancy here. */ :root[data-theme="dark"] { --wp--preset--color--accent: #FF6B2C; /* brand orange, 5.97:1 on charcoal */ --wp--preset--color--accent-2: #FF8854; --wp--preset--color--accent-soft: #E85A1F; --wp--preset--color--purple: #A95FD6; --wp--preset--color--pink: #F25C92; --wp--preset--color--green: #4FC07A; --wp--preset--color--yellow: #FFC23D; --wp--preset--color--blue: #4FC3F7; --wp--preset--color--base: #1C1C21; --wp--preset--color--base-2: #242429; --wp--preset--color--surface: #2A2A30; --wp--preset--color--surface-2: #323239; --wp--preset--color--border: #3A3A42; --wp--preset--color--border-strong: #484851; --wp--preset--color--contrast: #F5F3EF; --wp--preset--color--text-muted: #9B9AA3; --wp--preset--color--text-faint: #8A8994; /* AA 4.92:1 on charcoal */ --wp--preset--color--ink: #141417; --wp--preset--color--ink-2: #1D1A22; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 10px 28px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-lg: 0 16px 40px rgba(0,0,0,.4); --shadow-orange: 0 12px 32px rgba(255,107,44,.15); --shadow-purple: 0 16px 40px rgba(142,63,184,.18); --tint-orange: rgba(255,107,44,.10); --tint-purple: rgba(142,63,184,.12); --hairline: rgba(245,243,239,.08); } /* ============ BASE ============ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; overflow-x: hidden; transition: background .5s var(--ease), color .5s var(--ease); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } ::selection { background: var(--orange); color: #fff; } [id] { scroll-margin-top: 100px; } /* faint ambient radial wash - orange/purple, per the 1.1.0 identity */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(ellipse 900px 640px at 84% -14%, rgba(255,107,44,.06) 0%, transparent 58%), radial-gradient(ellipse 760px 540px at 6% 112%, rgba(142,63,184,.07) 0%, transparent 58%); } :root[data-theme="dark"] body::before { background-image: radial-gradient(ellipse 900px 640px at 84% -14%, rgba(255,107,44,.08) 0%, transparent 58%), radial-gradient(ellipse 760px 540px at 6% 112%, rgba(142,63,184,.10) 0%, transparent 58%); } /* subtle film grain */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } :root[data-theme="dark"] body::after { opacity: .55; mix-blend-mode: overlay; } /* Root layout: keep block content above the fixed washes */ .wp-site-blocks { position: relative; z-index: 1; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 3.2vw, 52px); position: relative; z-index: 1; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; } /* ============ SKIP LINK ============ */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--ink); color: #F5F3EF; padding: 12px 22px; border-radius: 0 0 var(--r) 0; font-weight: 700; font-size: 14px; } .skip-link:focus { left: 0; } /* ============ SCROLL PROGRESS ============ */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: transparent; } .scroll-progress-bar { height: 100%; width: 0; background: var(--orange); transition: width .1s linear; } /* ============ TOP BAR / NAV ============ */ .topbar { position: sticky; top: 0; z-index: 100; padding: 18px 0; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); transition: background .5s var(--ease), border-color .5s var(--ease); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; } .brand .wp-block-site-title { margin: 0; font-size: inherit; font-family: inherit; font-weight: inherit; } .brand .wp-block-site-title a { color: inherit; } .brand-mark { display: grid; grid-template-columns: repeat(3,6px); grid-template-rows: repeat(3,6px); gap: 2.5px; transition: transform .6s var(--ease); } .brand:hover .brand-mark { transform: rotate(90deg); } .brand-mark span { display: block; border-radius: 1px; } .brand-mark span:nth-child(1){background:#E53935}.brand-mark span:nth-child(2){background:#FFB300}.brand-mark span:nth-child(3){background:#9CCC3A} .brand-mark span:nth-child(4){background:#FF6B2C}.brand-mark span:nth-child(5){background:#29B6F6}.brand-mark span:nth-child(6){background:#8E3FB8} .brand-mark span:nth-child(7){grid-column:1/4; height:3.5px; border-radius:1px; background:var(--text); transform:translateY(2px);} /* Custom topnav (ported 1:1) + Apps & Tools mega dropdown */ .topnav { display: flex; gap: 32px; align-items: center; } .topnav a { position: relative; color: var(--text-muted); font-size: 14px; font-weight: 600; transition: color .25s; } .topnav a::after { content: ''; position: absolute; bottom: -6px; left: 0; right: 0; height: 1.5px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .topnav a:hover, .topnav a.active { color: var(--text); } .topnav a:hover::after, .topnav a.active::after { transform: scaleX(1); } .topbar-actions { display: flex; gap: 10px; align-items: center; } .nav-item { position: relative; display: inline-flex; } .nav-item .mega { position: absolute; top: calc(100% + 16px); left: 50%; transform: translate(-50%, 8px); width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 12px; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; z-index: 120; } .nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav-item .mega::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .topnav .mega a::after { display: none; } .mega .mega-item { display: flex; gap: 13px; align-items: center; padding: 10px; border-radius: var(--r); transition: background .2s; } .mega .mega-item:hover { background: var(--surface-2); } .mega .mi-thumb { width: 62px; height: 44px; border-radius: 8px; flex: 0 0 auto; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .02em; } .mega .mi-name { display: block; font-weight: 700; font-size: 14px; color: var(--text); } .mega .mi-desc { display: block; font-size: 12.5px; color: var(--text-faint); margin-top: 1px; } .mega .mi-price { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--orange); } .mega .mega-foot { display: block; text-align: center; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--orange); padding: 12px 10px 5px; border-top: 1px solid var(--hairline); margin-top: 8px; } @media (max-width: 920px) { .nav-item .mega { display: none; } } /* Hamburger: hidden by default; becomes the mobile control only once theme.js has booted (no-JS mobile keeps the plain topnav links). */ .nav-toggle { display: none; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--border-strong); cursor: pointer; color: var(--text); align-items: center; justify-content: center; padding: 0; } .nav-toggle svg { width: 20px; height: 20px; } /* Full-screen mobile panel (theme.js toggles .open) */ .mobile-panel { position: fixed; inset: 0; z-index: 300; background: var(--bg); transform: translateY(-100%); display: flex; flex-direction: column; padding: 26px 36px; overflow-y: auto; } @media (prefers-reduced-motion: no-preference) { .mobile-panel { transition: transform .5s var(--ease); } } .mobile-panel.open { transform: none; } .mobile-panel .mp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; } .mobile-panel a { font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -.01em; padding: 16px 0; border-bottom: 1px solid var(--hairline); color: var(--text); } .mobile-panel a:hover, .mobile-panel a.active { color: var(--orange); font-style: italic; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--border-strong); cursor: pointer; display: grid; place-items: center; color: var(--text-muted); transition: all .25s; padding: 0; } .theme-toggle:hover { color: var(--text); border-color: var(--text); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-dark { display: none; } .theme-toggle .icon-light { display: block; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } /* Toggle is inert without JS - only show it once JS has booted. */ .theme-toggle { visibility: hidden; } html.t4t-js .theme-toggle { visibility: visible; } /* ============ BUTTONS ============ */ .btn, .wp-block-button__link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; letter-spacing: .01em; cursor: pointer; border: none; border-radius: 100px; padding: 14px 26px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, border-color .25s, color .25s; will-change: transform; } .btn svg { width: 15px; height: 15px; transition: transform .3s var(--ease); } .btn-primary, .wp-block-button__link { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(210,89,42,.22); } .btn-primary:hover, .wp-block-button__link:hover { transform: translateY(-2px); background: var(--orange-soft); box-shadow: 0 12px 28px rgba(210,89,42,.30); color: #fff; } .btn-primary:hover svg { transform: translateX(4px); } .btn-dark { background: var(--text); color: var(--bg); } .btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn-dark:hover svg { transform: translateX(4px); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); } .btn-secondary:hover { border-color: var(--text); transform: translateY(-2px); } .btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-sm { padding: 11px 19px; font-size: 13.5px; } .btn-on-dark { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(6px); } .btn-on-dark:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); } /* ============ SECTION PRIMITIVES ============ */ .section { padding: 84px 0; border-top: 1px solid var(--hairline); position: relative; } .section.flush { border-top: none; padding-top: 24px; } .section-head { max-width: 760px; margin-bottom: 56px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin: 0 0 22px; } .eyebrow.pill { padding: 8px 16px; border-radius: 100px; background: var(--tint-orange); border: 1px solid color-mix(in srgb, var(--orange) 26%, transparent); letter-spacing: .18em; } .eyebrow.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); } .section-title { font-family: var(--font-display); font-size: clamp(28px,2.6vw,38px); font-weight: 500; line-height: 1.06; letter-spacing: -.02em; margin: 0 0 18px; } .section-title em { font-style: italic; font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lede { font-size: 18px; color: var(--text-muted); line-height: 1.62; max-width: 62ch; margin: 0; } /* ============ HERO - refined espresso ink ============ */ /* Home hero pins its accents to the espresso palette even though the rest of the site uses the vibrant brand colors. */ .hero { padding: 28px 0 0; --orange: #D2592A; --orange-2: #E0733E; --orange-soft: #B94E22; } .hero-block { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 76px 60px 68px; color: #F3ECE1; background: linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 70%, #262030 100%); box-shadow: var(--shadow-lg); } .hero-block::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .hero-orb { position: absolute; border-radius: 50%; filter: blur(20px); pointer-events: none; } .hero-orb.o1 { width: 460px; height: 460px; background: radial-gradient(circle,rgba(210,89,42,.42),transparent 66%); top: -160px; right: -120px; } .hero-orb.o2 { width: 300px; height: 300px; background: radial-gradient(circle,rgba(110,75,134,.30),transparent 68%); bottom: -150px; left: 18%; } .hero-badge { position: absolute; top: 40px; right: 48px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,236,225,.7); border: 1px solid rgba(255,255,255,.16); padding: 8px 15px; border-radius: 100px; z-index: 3; } .hero-eyebrow { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,236,225,.78); margin: 0 0 34px; } .hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--orange); } .hero h1 { position: relative; font-family: var(--font-display); font-weight: 600; font-size: clamp(38px,4vw,52px); line-height: 1.06; letter-spacing: -.02em; max-width: 18ch; margin: 0; } .hero h1 .grad, .hero h1 em { font-style: italic; font-weight: 500; background: none; -webkit-text-fill-color: #E0733E; color: #E0733E; } .hero-sub { position: relative; font-size: clamp(16px,1.1vw,18.5px); line-height: 1.62; color: rgba(243,236,225,.78); max-width: 60ch; margin: 30px 0 0; } .hero-actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 44px; } .hero-meta { position: relative; display: flex; gap: 10px 28px; flex-wrap: wrap; margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: rgba(243,236,225,.62); } .hero-meta span { display: inline-flex; align-items: center; gap: 9px; } .hero-meta svg { width: 13px; height: 13px; color: var(--orange-2); } /* ============ STAT BANDS ============ */ .stat-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); } .stat-cell { padding: 34px 32px; border-left: 1px solid var(--hairline); transition: background .3s; } .stat-cell:first-child { border-left: none; } .stat-cell:hover { background: var(--surface-2); } .stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,2.2vw,36px); letter-spacing: -.02em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 10px; } /* ============ CARDS ============ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; position: relative; overflow: hidden; --mx: 50%; --my: 0%; } .card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); } .card > * { position: relative; z-index: 1; } .card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); z-index: 0; background: radial-gradient(340px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent, var(--orange)) 20%, transparent), transparent 62%); } @media (pointer:fine){ .card:hover::after { opacity: 1; } } .card-accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent,var(--orange)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: 2; } .card-accent:hover::before { transform: scaleX(1); } .card-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--tint-orange); color: var(--accent,var(--orange)); margin-bottom: 20px; transition: transform .35s var(--ease); } .card:hover .card-icon { transform: scale(1.06) rotate(-3deg); } .card-icon svg { width: 21px; height: 21px; } .card-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; margin: 0 0 10px; } .card-desc { font-size: 14.5px; line-height: 1.62; color: var(--text-muted); margin: 0; } .card-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--orange); margin-top: 20px; display: inline-flex; gap: 7px; align-items: center; } .card-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); } .card:hover .card-link svg { transform: translateX(4px); } /* chips / tags */ .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 100px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); transition: all .25s; } .chip:hover { border-color: var(--text); color: var(--text); } .chip .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); } .tag-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } /* ============ TRUST MARQUEE ============ */ .trust-strip { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 20px 0; background: transparent; } .trust-marquee { display: flex; gap: 48px; white-space: nowrap; width: max-content; margin: 0; } @media (prefers-reduced-motion: no-preference) { .trust-marquee { animation: marquee 46s linear infinite; } .trust-strip:hover .trust-marquee { animation-play-state: paused; } } .trust-item { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--text-muted); } .trust-item .pip { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ============ HOMEPAGE SECTIONS ============ */ .dualpath { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .path { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 40px; border: 1px solid var(--border); background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; } .path:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .path .glow { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none; } .path:hover .glow { opacity: 1; } .path.indiv .glow { background: radial-gradient(420px 240px at 80% 0%, var(--tint-orange), transparent 70%); } .path.comp .glow { background: radial-gradient(420px 240px at 80% 0%, var(--tint-purple), transparent 70%); } .path .ptag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .path h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(23px,1.9vw,28px); letter-spacing: -.03em; margin: 14px 0 12px; line-height: 1.05; } .path h3 em { font-style: italic; color: var(--orange); } .path.comp h3 em { color: var(--purple); } .path p { color: var(--text-muted); font-size: 15.5px; line-height: 1.6; max-width: 42ch; margin: 0; } .path ul { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .path li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-muted); } .path li svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; margin-top: 2px; } .pillars-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .creds-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; } .cred-num { font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -.03em; color: var(--accent,var(--orange)); margin-bottom: 4px; } .cred-proof { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } /* featured apps */ .feat-app { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(155deg,#141417 0%,#1D1A22 70%,#262030 100%); color: #F3ECE1; box-shadow: var(--shadow-lg); margin-bottom: 20px; transition: transform .35s var(--ease), box-shadow .35s; } .feat-app:hover { transform: translateY(-4px); } .feat-left { padding: 52px 48px 48px; display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 2; } .feat-new { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,236,225,.85); border: 1px solid rgba(255,255,255,.2); padding: 8px 15px; border-radius: 100px; } .feat-new .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); } .feat-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px,2.6vw,40px); letter-spacing: -.03em; line-height: 1; margin: 20px 0 8px; } .feat-title em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .feat-tagline { font-family: var(--font-display); font-size: clamp(17px,1.3vw,20px); color: rgba(243,236,225,.9); margin-bottom: 16px; } .feat-tagline em { font-style: italic; color: var(--orange-2); } .feat-desc { color: rgba(243,236,225,.75); font-size: 15px; line-height: 1.62; max-width: 50ch; margin: 0; } .feat-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(243,236,225,.6); } .feat-meta .dot { color: rgba(255,255,255,.25); } .feat-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); width: 100%; } .feat-price { font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -.02em; } .feat-price span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: rgba(243,236,225,.55); margin-left: 6px; } .feat-cover { position: relative; min-height: 380px; overflow: hidden; } .feat-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .feat-app:hover .feat-cover img { transform: scale(1.05); } .feat-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #1B1410 0%, transparent 22%); pointer-events: none; } .apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .app-card { display: flex; flex-direction: column; } .app-cover { border-radius: var(--r); overflow: hidden; position: relative; margin-bottom: 20px; } .app-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .app-card:hover .app-cover img { transform: scale(1.05); } .app-cover-grad { display: flex; align-items: flex-end; padding: 22px; color: #fff; } .app-mini .app-cover { height: 170px; } .cover-vol { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .92; margin-bottom: 6px; } .cover-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px,2vw,28px); letter-spacing: -.02em; } .cover-title em { font-style: normal; } .app-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .app-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); } .app-meta .dot { color: var(--border-strong); } .app-price { margin-left: auto; font-family: var(--font-display); font-weight: 500; color: var(--text); } /* about */ .about-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 48px; align-items: start; } .about-photo { position: relative; } .about-photo .frame { max-width: 222px; border-radius: 50%; overflow: hidden; aspect-ratio: 1/1; border: 1px solid var(--border); background: radial-gradient(125% 125% at 50% 4%, color-mix(in srgb, var(--purple) 16%, var(--bg-2)) 0%, var(--bg-2) 72%); box-shadow: var(--shadow-sm); } .about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.94); transition: filter .4s var(--ease), transform .5s var(--ease); } .about-photo .frame:hover img { filter: saturate(1.05); transform: scale(1.03); } .about-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 20px; } .about-content p { color: var(--text-muted); font-size: 16.5px; line-height: 1.68; margin: 0 0 18px; } .about-content em { color: var(--text); font-style: normal; font-weight: 700; } .pullquote { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.6vw,28px); line-height: 1.25; letter-spacing: -.02em; color: var(--text); border-left: 3px solid var(--orange); padding-left: 22px; margin: 26px 0; } .pullquote em { font-style: italic; color: var(--orange); font-weight: 700; } @media (min-width:861px){ .about-sticky { position: sticky; top: 108px; } } /* testimonials */ .testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .testi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; transition: transform .3s var(--ease), box-shadow .3s; } .testi:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .testi .stars { color: var(--yellow); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; } .testi p { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0 0 18px; } .testi .who { display: flex; align-items: center; gap: 12px; } .testi .av { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 15px; } .testi .nm { font-weight: 700; font-size: 14px; } .testi .rl { font-size: 12.5px; color: var(--text-faint); } /* youtube band */ .yt-card { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 56px; color: #fff; background: linear-gradient(140deg,#2A1410,#7A2A1C 55%,#C2552B); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; } .yt-card h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px,3.4vw,40px); letter-spacing: -.03em; line-height: 1.05; margin: 0; } .yt-card p { color: rgba(255,255,255,.85); margin: 14px 0 24px; font-size: 16px; } .yt-mock { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r); aspect-ratio: 16/9; display: grid; place-items: center; } a.yt-mock { cursor: pointer; position: relative; transition: border-color .3s; } a.yt-mock:hover { border-color: rgba(255,255,255,.4); } a.yt-mock .yt-badge { position: absolute; bottom: 12px; right: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: 6px 11px; border-radius: 100px; } .yt-play { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .3s; } .yt-card:hover .yt-play { transform: scale(1.1); } .yt-play svg { width: 24px; height: 24px; color: #C2261C; margin-left: 3px; } /* contact CTA */ .contact-cta { text-align: center; padding: 96px 0; } .contact-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px,3vw,44px); letter-spacing: -.035em; line-height: 1; margin: 0 0 18px; } .contact-cta h2 em { font-style: italic; color: var(--orange); } .contact-cta p { color: var(--text-muted); font-size: 17px; max-width: 54ch; margin: 0 auto 32px; } /* ============ PAGE HEAD (interior pages, blog) ============ */ .page-head { padding: 60px 0 24px; } .ph-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px,3.2vw,44px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 18px; } .ph-title em { font-style: italic; color: var(--orange); } /* ============ BLOG / POSTS GRID (Query Loop) ============ */ /* wp:post-template renders