/* Learn2TradeNow — Global color theme (matches ADRWEB.com style) ---------------------------------------------------------------- ADRWEB uses a dark navy/near-black background with electric-blue CTAs and a lighter cyan accent for highlights and numbers — a clean, "AI/fintech" dark theme. This stylesheet defines that palette as CSS variables and applies it to the common elements across your site (body, headings, buttons, links, cards, forms, footer) so everything matches consistently instead of each section having its own slightly-different dark color. HOW TO USE: 1. Link this file in the of every page, e.g.: 2. It works alongside the header, ticker, and class-card sections already built — they use the same color values, so nothing will clash. 3. If you want to fine-tune any exact shade after seeing it live, just tell me which element and what to change — these are CSS variables, so a single edit updates the whole site. */ :root { /* Backgrounds */ --l2t-bg: #0b0e14; /* main page background — near-black navy */ --l2t-bg-alt: #11151f; /* slightly lighter panel/section background */ --l2t-card-bg: #131722; /* card/box background */ --l2t-border: #232838; /* subtle borders/dividers */ /* Text */ --l2t-text: #f5f6f8; /* primary text — near-white */ --l2t-text-muted: #a6adba; /* secondary/body copy */ --l2t-text-dim: #6b7280; /* least prominent text, captions */ /* Accents (ADRWEB-style electric blue + cyan) */ --l2t-accent: #2f6fff; /* primary CTA blue */ --l2t-accent-hover: #1f5ae0; --l2t-cyan: #6cc5ff; /* highlight/number/eyebrow color */ /* Status colors (for the ticker) */ --l2t-up: #33d17a; --l2t-down: #ff5c5c; --l2t-radius: 10px; --l2t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Base */ html, body { background: var(--l2t-bg); color: var(--l2t-text); font-family: var(--l2t-font); margin: 0; padding: 0; } h1, h2, h3, h4 { color: #ffffff; font-weight: 700; margin: 0 0 12px; } p { color: var(--l2t-text-muted); line-height: 1.6; } a { color: var(--l2t-cyan); text-decoration: none; } a:hover { color: var(--l2t-accent); } /* Eyebrow labels (small uppercase kickers above section headings) */ .l2t-eyebrow, .eyebrow { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l2t-cyan); font-weight: 600; margin-bottom: 8px; } /* Sections alternate between bg and bg-alt for subtle separation */ section { padding: 64px 20px; } section.alt { background: var(--l2t-bg-alt); } /* Cards (classes grid, stat boxes, testimonials, etc.) */ .card, .l2t-card { background: var(--l2t-card-bg); border: 1px solid var(--l2t-border); border-radius: var(--l2t-radius); padding: 16px; transition: transform .15s ease, border-color .15s ease; } .card:hover, .l2t-card:hover { transform: translateY(-3px); border-color: var(--l2t-accent); } /* Primary buttons (Enroll now, Book a Call, Send message, etc.) */ .btn, .btn-primary, button[type="submit"] { display: inline-block; background: var(--l2t-accent); color: #ffffff; font-weight: 700; font-size: 14px; padding: 10px 20px; border: none; border-radius: 7px; cursor: pointer; text-decoration: none; } .btn:hover, .btn-primary:hover, button[type="submit"]:hover { background: var(--l2t-accent-hover); } /* Secondary / outline buttons */ .btn-outline { display: inline-block; background: transparent; color: var(--l2t-text); font-weight: 700; font-size: 14px; padding: 9px 19px; border: 1px solid var(--l2t-border); border-radius: 7px; text-decoration: none; } .btn-outline:hover { border-color: var(--l2t-accent); color: var(--l2t-cyan); } /* Price display (used on the class cards) */ .price { color: var(--l2t-cyan); font-weight: 800; } /* Forms (contact form, questionnaire) */ input, textarea, select { background: var(--l2t-card-bg); border: 1px solid var(--l2t-border); color: var(--l2t-text); border-radius: 7px; padding: 10px 12px; font-family: var(--l2t-font); font-size: 14px; } input::placeholder, textarea::placeholder { color: var(--l2t-text-dim); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--l2t-accent); } /* Footer */ footer { background: var(--l2t-bg-alt); border-top: 1px solid var(--l2t-border); color: var(--l2t-text-dim); padding: 32px 20px; font-size: 13px; } footer a { color: var(--l2t-text-muted); } footer a:hover { color: var(--l2t-cyan); }