/* ================================================================ FINISIT ECOSYSTEM — BRAND IDENTITY SYSTEM v2 FinShark · NisitSorngraph · TradeTongkam · Fintastic Returns Philosophy: atmosphere over icons. Each brand lives in its own visual universe — distinct background tones, accent gradients, typography weight, and color temperature. No logos needed; the theme IS the identity. Usage: ================================================================ */ /* ────────────────────────────────────────────────────────────── 1. TOKEN OVERRIDES — cascade to every element on the page ────────────────────────────────────────────────────────────── */ [data-brand="finshark"] { --brand: #D4AF27; --brand-lt: #E8CA60; --brand-dim: rgba(212,175,39,0.55); --brand-glow: rgba(212,175,39,0.10); --brand-border: rgba(212,175,39,0.22); --brand-dark: #060C14; --page-bg: #060A12; --page-bg-mid: #08111C; --accent-h: 45; /* gold hue for HSL tints */ } [data-brand="nisit"] { --brand: #D4A737; --brand-lt: #E3C06A; --brand-dim: rgba(212,167,55,0.55); --brand-glow: rgba(212,167,55,0.09); --brand-border: rgba(212,167,55,0.20); /* Page atmosphere matches Tradetongkam (deep black) so the umbrella * reads as one continuous canvas across pillars. Brand-accent stays * gold via --brand above — only the canvas changed from navy. */ --brand-dark: #08080A; --page-bg: #060608; --page-bg-mid: #090910; --accent-h: 40; } [data-brand="tradetongkam"] { --brand: #D4A737; --brand-lt: #E3C06A; --brand-dim: rgba(212,167,55,0.50); --brand-glow: rgba(212,167,55,0.08); --brand-border: rgba(212,167,55,0.18); --brand-dark: #08080A; --page-bg: #060608; --page-bg-mid: #090910; --accent-h: 42; --tk-up: #3DB87A; --tk-down: #E05555; } [data-brand="fintastic"] { --brand: #4766E1; --brand-lt: #7B96F0; --brand-dim: rgba(71,102,225,0.55); --brand-glow: rgba(71,102,225,0.10); --brand-border: rgba(71,102,225,0.22); --brand-dark: #050915; --page-bg: #060A18; --page-bg-mid: #080E1E; --accent-h: 228; } /* ────────────────────────────────────────────────────────────── 2. PAGE ATMOSPHERE — body background & ambient glow ────────────────────────────────────────────────────────────── */ [data-brand] body, [data-brand] { background-color: var(--page-bg, var(--ink-void)); } /* Soft radial ambient behind the whole page */ [data-brand="finshark"]::before, [data-brand="nisit"]::before, [data-brand="tradetongkam"]::before, [data-brand="fintastic"]::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; } /* Each brand gets a unique ambient blob in its signature colour */ [data-brand="finshark"] { background: radial-gradient(1200px 600px at 70% -5%, rgba(212,175,39,0.06) 0%, transparent 55%), radial-gradient(900px 700px at 5% 90%, rgba(6,12,20,0.9) 0%, transparent 70%), var(--page-bg, #060A12); } [data-brand="nisit"] { background: radial-gradient(1100px 550px at 72% -8%, rgba(212,167,55,0.07) 0%, transparent 52%), radial-gradient(800px 600px at 8% 88%, rgba(8,8,10,0.9) 0%, transparent 65%), var(--page-bg, #060608); } [data-brand="tradetongkam"] { background: radial-gradient(1000px 500px at 65% -10%, rgba(212,167,55,0.05) 0%, transparent 50%), radial-gradient(700px 500px at 5% 85%, rgba(8,8,10,0.95) 0%, transparent 65%), var(--page-bg, #060608); } [data-brand="fintastic"] { background: radial-gradient(1100px 600px at 65% -5%, rgba(71,102,225,0.08) 0%, transparent 52%), radial-gradient(800px 600px at 8% 88%, rgba(5,9,21,0.85) 0%, transparent 65%), var(--page-bg, #060A18); } /* ────────────────────────────────────────────────────────────── 3. BRAND IDENTITY STRIP A substantial atmospheric bar — pure typography, no icons. The brand colour radiates from the left; name reads large. ────────────────────────────────────────────────────────────── */ .brand-id-strip { position: relative; overflow: hidden; background: var(--brand-dark, #060C14); border-bottom: 1px solid var(--brand-border, rgba(212,184,135,0.15)); } /* Top shimmer line — animated sweep in brand colour */ .brand-id-strip::before { content: ''; position: absolute; top: 0; left: -100%; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--brand-dim, rgba(212,175,39,0.55)) 45%, var(--brand, #D4AF27) 50%, var(--brand-dim, rgba(212,175,39,0.55)) 55%, transparent 100%); animation: brand-shimmer 4s ease-in-out infinite; } @keyframes brand-shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Atmospheric colour bleed from the left edge */ .brand-id-strip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--brand-glow, rgba(212,175,39,0.10)) 0%, transparent 60%); pointer-events: none; } .brand-id-strip__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 0; padding: 14px var(--gutter, 24px); max-width: var(--container-wide, 1320px); margin: 0 auto; } /* ── Logo image in strip ── */ .brand-id-logo { width: auto; height: 44px; flex-shrink: 0; object-fit: contain; border-radius: 8px; /* PNGs have dark bg — blend naturally into strip dark background */ mix-blend-mode: lighten; filter: drop-shadow(0 0 8px var(--brand-glow, rgba(212,175,39,0.25))); margin-right: 10px; transition: filter var(--dur-fast, 0.15s); } .brand-id-logo:hover { filter: drop-shadow(0 0 14px var(--brand-glow, rgba(212,175,39,0.4))); } /* Hero logo — larger centrepiece above h1 */ .brand-hero-logo { display: block; height: 110px; width: auto; object-fit: contain; margin-bottom: var(--sp-6, 24px); mix-blend-mode: lighten; filter: drop-shadow(0 0 24px var(--brand-glow, rgba(212,175,39,0.3))); } /* Ecosystem card logo thumbnail */ .eco-brand-card__logo { height: 64px; width: auto; object-fit: contain; mix-blend-mode: lighten; filter: drop-shadow(0 0 10px var(--brand-glow, rgba(212,184,135,0.2))); flex-shrink: 0; margin-bottom: var(--sp-3, 12px); } /* ── Brand name block (left) ── */ .brand-id-name { flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; } .brand-id-name__main { font-family: var(--font-display, 'Playfair Display', serif); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; color: var(--brand, #D4AF27); line-height: 1.2; } .brand-id-name__sub { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-dim, rgba(240,232,214,0.45)); line-height: 1.3; } /* ── Vertical divider ── */ .bs-div { width: 1px; align-self: stretch; background: var(--brand-border, rgba(212,184,135,0.15)); flex-shrink: 0; margin: 0 20px; } /* ── Pillars (middle) ── */ .brand-pillars { flex: 1; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-dim, rgba(240,232,214,0.45)); } .brand-pillars span { transition: color var(--dur-fast, 0.15s); } .brand-pillars:hover span:not(.brand-pillars__dot) { color: var(--ivory-muted, rgba(240,232,214,0.65)); } .brand-pillars__dot { font-size: 6px; color: var(--brand-border, rgba(212,184,135,0.25)); user-select: none; } /* ── Ecosystem badge (right) ── */ .brand-eco { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory-dim, rgba(240,232,214,0.45)); } .brand-eco__link { color: var(--ivory-muted, rgba(240,232,214,0.65)); text-decoration: none; transition: color var(--dur-fast, 0.15s); border-bottom: 1px solid var(--brand-border, rgba(212,184,135,0.15)); padding-bottom: 1px; } .brand-eco__link:hover { color: var(--brand, #D4AF27); border-bottom-color: var(--brand, #D4AF27); } .brand-eco__sep { opacity: 0.3; } /* ── Mobile ── */ @media (max-width: 640px) { .brand-pillars { display: none; } .brand-eco { display: none; } .bs-div { display: none; } .brand-id-strip__inner { padding: 10px var(--gutter, 16px); } } /* ────────────────────────────────────────────────────────────── 4. BRAND EYEBROW — animated pill in hero sections ────────────────────────────────────────────────────────────── */ .brand-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; border: 1px solid var(--brand-border, rgba(212,184,135,0.18)); border-radius: var(--r-pill, 999px); background: var(--brand-glow, rgba(212,184,135,0.06)); font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand, #D4AF27); margin-bottom: var(--sp-5, 20px); } .brand-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand, #D4AF27); animation: brand-pulse 2.4s ease-in-out infinite; flex-shrink: 0; } @keyframes brand-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } } /* ────────────────────────────────────────────────────────────── 5. BUTTON + ACCENT OVERRIDES ────────────────────────────────────────────────────────────── */ [data-brand] .btn-primary { background: linear-gradient(135deg, var(--brand-lt, #E8CA60) 0%, var(--brand, #D4AF27) 100%); color: var(--brand-dark, #07090E); border-color: transparent; box-shadow: 0 0 20px var(--brand-glow, rgba(212,175,39,0.18)); } [data-brand] .btn-primary:hover { background: var(--brand-lt, #E8CA60); box-shadow: 0 0 32px var(--brand-glow, rgba(212,175,39,0.28)); } /* Fintastic: blue buttons need white text */ [data-brand="fintastic"] .btn-primary { color: #fff; } /* ────────────────────────────────────────────────────────────── 6. HERO SECTION GRADIENTS — immersive, brand-specific ────────────────────────────────────────────────────────────── */ /* FinShark: NFT hero — deep obsidian, gold corona top-right */ [data-brand="finshark"] .nft-hero { background: radial-gradient(1100px 700px at 88% -15%, rgba(212,175,39,0.14) 0%, transparent 55%), radial-gradient(800px 600px at -10% 110%, rgba(6,12,20,0.9) 0%, transparent 60%), radial-gradient(1400px 800px at 50% 50%, rgba(8,16,28,0.7) 0%, transparent 75%), linear-gradient(180deg, #06090F 0%, #080E18 100%); } [data-brand="finshark"] .nft-hero h1 em { background: linear-gradient(135deg, #E8CA60 0%, #D4AF27 50%, #8B6C1A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* NisitSorngraph: learn hero — deep navy, cool analytical gold */ [data-brand="nisit"] .learn-hero, [data-brand="nisit"] .page-hero { background: radial-gradient(1000px 600px at 80% -18%, rgba(212,167,55,0.11) 0%, transparent 52%), radial-gradient(700px 500px at -5% 100%, rgba(10,24,40,0.85) 0%, transparent 60%), radial-gradient(1200px 700px at 50% 40%, rgba(8,18,36,0.6) 0%, transparent 70%), linear-gradient(180deg, #070E1A 0%, #0A1422 100%); } [data-brand="nisit"] .learn-hero h1 em, [data-brand="nisit"] .page-hero h1 em { background: linear-gradient(135deg, #E3C06A 0%, #D4A737 60%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* TradeTongkam: tt-hero — near-black, warm amber pulse */ [data-brand="tradetongkam"] .tt-hero { background: radial-gradient(900px 500px at 75% -20%, rgba(212,167,55,0.09) 0%, transparent 50%), radial-gradient(600px 400px at -5% 90%, rgba(8,8,10,0.95) 0%, transparent 55%), radial-gradient(1100px 600px at 50% 55%, rgba(7,7,9,0.75) 0%, transparent 70%), linear-gradient(180deg, #060608 0%, #0A0A0E 100%); } [data-brand="tradetongkam"] .tt-hero__headline em { color: var(--tk-gold, #D4A737); } /* Fintastic: shop hero — dark ocean blue, electric accent */ [data-brand="fintastic"] .page-hero, [data-brand="fintastic"] .shop-hero { background: radial-gradient(1000px 600px at 75% -15%, rgba(71,102,225,0.14) 0%, transparent 52%), radial-gradient(700px 500px at -5% 95%, rgba(5,9,21,0.9) 0%, transparent 58%), radial-gradient(1200px 700px at 50% 50%, rgba(6,10,24,0.7) 0%, transparent 72%), linear-gradient(180deg, #050910 0%, #080E1C 100%); } [data-brand="fintastic"] .page-hero h1 em { background: linear-gradient(135deg, #7B96F0 0%, #4766E1 60%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Shop hero em: gold — store is luxury, not brand-blue */ [data-brand="fintastic"] .shop-hero h1 em { background: linear-gradient(135deg, #F0DDB0 0%, #D4B887 40%, #B8985E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* Shop hero CTAs: override brand-blue → store gold */ [data-brand="fintastic"] .shop-hero__cta-group .btn-primary { background: linear-gradient(135deg, #E8D4A8 0%, #D4B887 50%, #B8985E 100%); color: var(--ink-void); box-shadow: 0 0 32px rgba(212,184,135,0.25), 0 4px 16px rgba(0,0,0,0.3); border-color: transparent; } [data-brand="fintastic"] .shop-hero__cta-group .btn-primary:hover { background: linear-gradient(135deg, #F0DDB0 0%, #E8D4A8 60%); box-shadow: 0 0 48px rgba(212,184,135,0.35), 0 8px 28px rgba(0,0,0,0.3); transform: translateY(-2px); color: var(--ink-void); } /* ────────────────────────────────────────────────────────────── 7. SECTION DIVIDERS & CARD TINTS — brand colour bleeds in ────────────────────────────────────────────────────────────── */ /* Section border accent: thin line at section tops */ [data-brand] section + section { border-top: 1px solid var(--brand-border, rgba(212,184,135,0.08)); } /* Cards / panels get a subtle brand tint on hover */ [data-brand] .card:hover, [data-brand] .nft-card:hover, [data-brand] .learn-card:hover, [data-brand] .product-card:hover { border-color: var(--brand-border, rgba(212,184,135,0.22)); box-shadow: 0 0 30px var(--brand-glow, rgba(212,175,39,0.08)); } /* Price / stat highlights use brand colour */ [data-brand] .price, [data-brand] .stat-value, [data-brand] .highlight { color: var(--brand, #D4AF27); } /* TradeTongkam candlestick colours */ [data-brand="tradetongkam"] .price-up { color: var(--tk-up, #3DB87A); } [data-brand="tradetongkam"] .price-down { color: var(--tk-down, #E05555); } /* ────────────────────────────────────────────────────────────── 8. ECOSYSTEM OVERVIEW CARDS (ecosystem.html) Pure CSS styling — no SVG icons needed ────────────────────────────────────────────────────────────── */ .eco-brand-card { display: flex; flex-direction: column; gap: var(--sp-4, 16px); padding: var(--sp-7, 28px) var(--sp-6, 24px); border: 1px solid var(--border-soft, rgba(255,255,255,0.06)); border-radius: var(--r-xl, 16px); background: rgba(255,255,255,0.015); text-decoration: none; color: inherit; transition: all var(--dur-base, 0.24s) var(--ease-luxe, ease); position: relative; overflow: hidden; } /* Accent top-edge bar in brand colour */ .eco-brand-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--card-brand, var(--gold, #D4AF27)) 0%, transparent 100%); opacity: 0.7; transition: opacity var(--dur-base, 0.24s); } /* Left colour-bleed ambient */ .eco-brand-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--card-brand-rgb, 212,184,135), 0.04) 0%, transparent 55%); pointer-events: none; transition: opacity var(--dur-base, 0.24s); opacity: 0; } .eco-brand-card:hover { border-color: var(--card-brand, var(--border-gold, rgba(212,184,135,0.3))); background: rgba(255,255,255,0.03); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px var(--card-border, rgba(212,184,135,0.08)); } .eco-brand-card:hover::before { opacity: 1; } .eco-brand-card:hover::after { opacity: 1; } /* Colour swatch — replaces SVG icon */ .eco-brand-card__swatch { width: 44px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--card-brand, #D4AF27), var(--card-brand-lt, rgba(212,184,135,0.4))); flex-shrink: 0; } .eco-brand-card__body { flex: 1; min-width: 0; } .eco-brand-card__name { font-family: var(--font-display, serif); font-size: var(--text-lg, 1.1rem); color: var(--ivory, #F0E8D6); margin-bottom: 5px; letter-spacing: -0.01em; line-height: 1.2; } .eco-brand-card__sub { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--card-brand, #D4AF27); margin-bottom: var(--sp-3, 12px); opacity: 0.85; } .eco-brand-card__desc { font-size: var(--text-sm, 0.875rem); color: var(--ivory-muted, rgba(240,232,214,0.6)); line-height: var(--leading-relaxed, 1.65); } /* ────────────────────────────────────────────────────────────── 9. LIGHT MODE SAFETY — keep strips dark regardless ────────────────────────────────────────────────────────────── */ [data-theme="light"] .brand-id-strip { background: var(--brand-dark, #0D1020); } [data-theme="light"][data-brand="finshark"] .brand-id-strip { background: #0C0A06; } [data-theme="light"][data-brand="nisit"] .brand-id-strip { background: #081422; } [data-theme="light"][data-brand="tradetongkam"] .brand-id-strip { background: #080608; } [data-theme="light"][data-brand="fintastic"] .brand-id-strip { background: #07091A; } /* ────────────────────────────────────────────────────────────── 10. BRANDED PAGES IN LIGHT MODE Three layers: A) Body bg → cream (beats Section 2 dark gradient, 0,2,0 > 0,1,0) B) Fixed ambient ::before → cleared (was transparent, belt+suspenders) C) Brand hero sections → warm light gradient (beats Section 6 near-black gradient, 0,3,0 > 0,2,0) ────────────────────────────────────────────────────────────── */ /* A — Body background → cream */ [data-theme="light"] [data-brand] { background: var(--bg); } /* B — Fixed ambient overlay → transparent */ [data-theme="light"] [data-brand]::before { background: none; } /* C — Brand hero sections → replace near-black with warm light gradient */ [data-theme="light"] [data-brand="tradetongkam"] .tt-hero, [data-theme="light"] [data-brand="finshark"] .nft-hero, [data-theme="light"] [data-brand="nisit"] .learn-hero, [data-theme="light"] [data-brand="nisit"] .page-hero, [data-theme="light"] [data-brand="fintastic"] .page-hero, [data-theme="light"] [data-brand="fintastic"] .shop-hero { background: radial-gradient(800px 500px at 75% 0%, rgba(212,184,135,0.10), transparent 60%), radial-gradient(600px 400px at 10% 100%, rgba(31,73,89,0.07), transparent 60%); } /* ── Fintastic Returns — Game Specs card (Wave 58) ──────────────────── */ .ft-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); max-width: 1080px; margin: 0 auto; } .ft-spec { background: rgba(255,255,255,0.02); border: 1px solid var(--border-soft, #1f2330); border-radius: 12px; padding: var(--sp-4); text-align: left; } .ft-spec--wide { grid-column: 1 / -1; } .ft-spec__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fin-brand, #4766E1); margin-bottom: 8px; } .ft-spec__value { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ivory); line-height: 1.2; } .ft-spec__assets { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; } .ft-asset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(71,102,225,0.08); border: 1px solid rgba(71,102,225,0.2); border-radius: 100px; color: var(--ivory); } .ft-asset b { font-size: 16px; }