/* ============================================ Viking Technology - Coming Soon Theme Variations Background Effects + Section Dark Modes Usage: Add theme class to element: body.theme-dark-main → Dark main content, light sidebar body.theme-dark-sidebar → Light main, dark sidebar body.theme-dark → Full dark card body.theme-split → Split background (light left, dark right) Background effects (add to body): body.bg-angle-60 → 60° diagonal line background body.bg-angle-45 → 45° diagonal line background body.bg-angle-30 → 30° diagonal line background body.bg-diagonal-split → Hard diagonal split background body.bg-wave → Wave pattern background body.bg-geometric → Geometric pattern background body.bg-dual-gradient → Dual gradient with angled cut Customizable via CSS variables on :root ============================================ */ /* --- Additional Design Tokens --- */ :root { /* Dark theme colors (customizable via admin) */ --vt-dark-bg: #0f172a; --vt-dark-bg-elevated: #1e293b; --vt-dark-text: #f1f5f9; --vt-dark-text-muted: #94a3b8; --vt-dark-border: #334155; /* Font colors (customizable via admin) */ --vt-font-color-main: #1e293b; --vt-font-color-main-muted: #64748b; --vt-font-color-sidebar: #1e293b; --vt-font-color-sidebar-muted: #64748b; /* Background effect colors */ --vt-bg-angle: 60deg; --vt-bg-split-position: 50%; --vt-bg-gap-width: 0px; --vt-bg-gap-color: transparent; --vt-bg-line-color: rgba(36, 87, 197, 0.12); --vt-bg-line-width: 200px; --vt-bg-accent: #2457c5; --vt-bg-accent-end: #764ba2; --vt-bg-dark-side: #0f172a; --vt-bg-light-side: #f6f7f9; } /* ============================================ BACKGROUND EFFECTS LAYER Applied via pseudo-element behind the card ============================================ */ /* Base background layer */ body[class*="bg-"]::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* --- 60° Angled Line Background (clean white gap) --- */ body.bg-angle-60 { --vt-bg-angle: 60deg; } body.bg-angle-60::before { background: linear-gradient( var(--vt-bg-angle), var(--vt-bg-light-side) calc(var(--vt-bg-split-position) - var(--vt-bg-gap-width)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position) - var(--vt-bg-gap-width)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position) + var(--vt-bg-gap-width)), var(--vt-bg-dark-side) calc(var(--vt-bg-split-position) + var(--vt-bg-gap-width)) ); } /* --- 45° Angled Line Background (clean white gap) --- */ body.bg-angle-45 { --vt-bg-angle: 45deg; } body.bg-angle-45::before { background: linear-gradient( var(--vt-bg-angle), var(--vt-bg-light-side) calc(var(--vt-bg-split-position) - var(--vt-bg-gap-width)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position) - var(--vt-bg-gap-width)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position) + var(--vt-bg-gap-width)), var(--vt-bg-dark-side) calc(var(--vt-bg-split-position) + var(--vt-bg-gap-width)) ); } /* --- 30° Angled Line Background (clean white gap) --- */ body.bg-angle-30 { --vt-bg-angle: 30deg; } body.bg-angle-30::before { background: linear-gradient( var(--vt-bg-angle), var(--vt-bg-light-side) calc(var(--vt-bg-split-position) - var(--vt-bg-gap-width)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position) - var(--vt-bg-gap-width)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position) + var(--vt-bg-gap-width)), var(--vt-bg-dark-side) calc(var(--vt-bg-split-position) + var(--vt-bg-gap-width)) ); } /* --- Diagonal Split (hard cut with white gap) --- */ body.bg-diagonal-split::before { background: linear-gradient( var(--vt-bg-angle, 60deg), var(--vt-bg-light-side) calc(var(--vt-bg-split-position, 50%) - var(--vt-bg-gap-width, 40px)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position, 50%) - var(--vt-bg-gap-width, 40px)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position, 50%) + var(--vt-bg-gap-width, 40px)), var(--vt-bg-dark-side) calc(var(--vt-bg-split-position, 50%) + var(--vt-bg-gap-width, 40px)) ); } /* --- Dual Gradient → clean angled cut with white gap --- */ body.bg-dual-gradient::before { background: linear-gradient( var(--vt-bg-angle, 60deg), var(--vt-bg-accent) calc(var(--vt-bg-split-position, 50%) - var(--vt-bg-gap-width, 40px) - 60px), var(--vt-bg-accent-end) calc(var(--vt-bg-split-position, 50%) - var(--vt-bg-gap-width, 40px)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position, 50%) - var(--vt-bg-gap-width, 40px)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position, 50%) + var(--vt-bg-gap-width, 40px)), var(--vt-bg-dark-side) calc(var(--vt-bg-split-position, 50%) + var(--vt-bg-gap-width, 40px)) ); } /* --- Wave Pattern Background --- */ body.bg-wave::before { background: var(--vt-bg-light-side); } body.bg-wave::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 20% 50%, rgba(36, 87, 197, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(118, 75, 162, 0.12) 0%, transparent 40%), radial-gradient(ellipse at 60% 80%, rgba(36, 87, 197, 0.10) 0%, transparent 45%), radial-gradient(ellipse at 40% 30%, rgba(118, 75, 162, 0.08) 0%, transparent 35%); } /* --- Geometric Pattern Background --- */ body.bg-geometric::before { background-color: var(--vt-bg-light-side); background-image: linear-gradient(30deg, rgba(36, 87, 197, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(36, 87, 197, 0.04) 87.5%, rgba(36, 87, 197, 0.04)), linear-gradient(150deg, rgba(36, 87, 197, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(36, 87, 197, 0.04) 87.5%, rgba(36, 87, 197, 0.04)), linear-gradient(30deg, rgba(36, 87, 197, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(36, 87, 197, 0.04) 87.5%, rgba(36, 87, 197, 0.04)), linear-gradient(150deg, rgba(36, 87, 197, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(36, 87, 197, 0.04) 87.5%, rgba(36, 87, 197, 0.04)), linear-gradient(60deg, rgba(118, 75, 162, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(118, 75, 162, 0.05) 75%, rgba(118, 75, 162, 0.05)), linear-gradient(60deg, rgba(118, 75, 162, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(118, 75, 162, 0.05) 75%, rgba(118, 75, 162, 0.05)); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; } /* --- Split Background (vertical, light | white gap | dark) --- */ body.bg-split::before { background: linear-gradient( 90deg, var(--vt-bg-light-side) calc(var(--vt-bg-split-position, 50%) - var(--vt-bg-gap-width, 40px)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position, 50%) - var(--vt-bg-gap-width, 40px)), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position, 50%) + var(--vt-bg-gap-width, 40px)), var(--vt-bg-dark-side) calc(var(--vt-bg-split-position, 50%) + var(--vt-bg-gap-width, 40px)) ); } /* --- Multi-line Angled (multiple parallel lines) --- */ body.bg-multi-angle::before { background-color: var(--vt-bg-light-side); background-image: repeating-linear-gradient( var(--vt-bg-angle, 60deg), transparent, transparent 80px, var(--vt-bg-line-color) 80px, var(--vt-bg-line-color) 82px ); } /* ============================================ THEME: DARK MAIN CONTENT Entire left column is dark, sidebar stays light ============================================ */ .theme-dark-main .vt-hero { overflow: hidden; padding: 0; background: transparent; border: none; box-shadow: none; gap: 0; } .theme-dark-main .vt-hero__content { background: var(--vt-dark-bg); color: #ffffff; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; border-radius: var(--vt-radius-xl) 0 0 var(--vt-radius-xl); min-height: 100%; } /* All text inside dark main should be light */ .theme-dark-main .vt-hero__content * { color: inherit; } .theme-dark-main .vt-hero__title { color: #ffffff; } .theme-dark-main .vt-hero__description { color: #aab2c0; } .theme-dark-main .vt-hero__eyebrow { color: var(--vt-bg-accent); } .theme-dark-main .vt-hero__notice { background: rgba(255, 255, 255, 0.06); color: #aab2c0; border-left-color: var(--vt-bg-accent); } .theme-dark-main .vt-hero__notice strong { color: #ffffff; } .theme-dark-main .vt-btn--primary { background: var(--vt-bg-accent); color: #ffffff; } .theme-dark-main .vt-btn--secondary { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: rgba(255, 255, 255, 0.15); } .theme-dark-main .vt-hero__content h1, .theme-dark-main .vt-hero__content h2, .theme-dark-main .vt-hero__content h3, .theme-dark-main .vt-hero__content strong { color: #ffffff; } .theme-dark-main .vt-hero__content p, .theme-dark-main .vt-hero__content span { color: #aab2c0; } .theme-dark-main .vt-hero__content a { color: var(--vt-bg-accent); } /* Sidebar stays light with normal padding */ .theme-dark-main .vt-hero__sidebar { padding: var(--vt-spacing-4xl); color: var(--vt-font-color-sidebar); background: var(--vt-color-white); border: 1px solid var(--vt-color-gray-200); border-left: none; border-radius: 0 var(--vt-radius-xl) var(--vt-radius-xl) 0; } .theme-dark-main .vt-step { background: var(--vt-color-background, #f8fafc); border: 1px solid var(--vt-color-gray-200, #e2e8f0); } .theme-dark-main .vt-step:hover { background: #f1f5f9; transform: translateX(4px); } /* ============================================ THEME: DARK SIDEBAR Main content stays light, entire right column is dark Matches reference: full-bleed dark bg with light text ============================================ */ .theme-dark-sidebar .vt-hero { overflow: hidden; padding: 0; background: transparent; border: none; box-shadow: none; gap: 0; } .theme-dark-sidebar .vt-hero__content { padding: var(--vt-spacing-4xl); color: var(--vt-font-color-main); display: flex; flex-direction: column; justify-content: center; background: var(--vt-color-white); border: 1px solid var(--vt-color-gray-200); border-right: none; border-radius: var(--vt-radius-xl) 0 0 var(--vt-radius-xl); } .theme-dark-sidebar .vt-hero__sidebar { background: var(--vt-dark-bg); color: #ffffff; padding: 52px 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0 var(--vt-radius-xl) var(--vt-radius-xl) 0; min-height: 100%; } /* All text inside dark sidebar should be light */ .theme-dark-sidebar .vt-hero__sidebar * { color: inherit; } .theme-dark-sidebar .vt-step { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 20px; } .theme-dark-sidebar .vt-step:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(4px); } .theme-dark-sidebar .vt-step__number { color: var(--vt-bg-accent); font-size: 32px; font-weight: 700; margin-bottom: 8px; } .theme-dark-sidebar .vt-step__title { color: #ffffff; font-size: 18px; font-weight: 700; line-height: 1.35; } .theme-dark-sidebar .vt-step__description, .theme-dark-sidebar .vt-step__text { color: #aab2c0; font-size: 14px; line-height: 1.6; } /* Any labels/headings inside sidebar */ .theme-dark-sidebar .vt-hero__sidebar h1, .theme-dark-sidebar .vt-hero__sidebar h2, .theme-dark-sidebar .vt-hero__sidebar h3, .theme-dark-sidebar .vt-hero__sidebar h4, .theme-dark-sidebar .vt-hero__sidebar strong { color: #ffffff; } .theme-dark-sidebar .vt-hero__sidebar p, .theme-dark-sidebar .vt-hero__sidebar span, .theme-dark-sidebar .vt-hero__sidebar small { color: #aab2c0; } .theme-dark-sidebar .vt-hero__sidebar a { color: var(--vt-bg-accent); } /* ============================================ THEME: FULL DARK Entire card is dark ============================================ */ .theme-dark .vt-hero { background: var(--vt-dark-bg); border-color: var(--vt-dark-border); } .theme-dark .vt-hero__title { color: var(--vt-dark-text); } .theme-dark .vt-hero__description { color: var(--vt-dark-text-muted); } .theme-dark .vt-hero__eyebrow { color: var(--vt-bg-accent); } .theme-dark .vt-hero__notice { background: var(--vt-dark-bg-elevated); color: var(--vt-dark-text-muted); border-left-color: var(--vt-bg-accent); } .theme-dark .vt-hero__notice strong { color: var(--vt-dark-text); } .theme-dark .vt-btn--primary { background: var(--vt-bg-accent); } .theme-dark .vt-btn--secondary { background: var(--vt-dark-bg-elevated); color: var(--vt-dark-text); border-color: var(--vt-dark-border); } .theme-dark .vt-step { background: var(--vt-dark-bg-elevated); border: 1px solid var(--vt-dark-border); } .theme-dark .vt-step:hover { background: #253349; } .theme-dark .vt-step__number { color: var(--vt-bg-accent); } .theme-dark .vt-step__title { color: var(--vt-dark-text); } .theme-dark .vt-step__description { color: var(--vt-dark-text-muted); } .theme-dark .vt-link { color: var(--vt-bg-accent); } .theme-dark .vt-brand__name { color: var(--vt-dark-text); } .theme-dark .vt-header__action { background: var(--vt-dark-bg-elevated); color: var(--vt-dark-text); border-color: var(--vt-dark-border); } .theme-dark .vt-footer__copyright { color: var(--vt-dark-text-muted); } /* ============================================ THEME: SPLIT BACKGROUND Left side light, right side dark - card untouched ============================================ */ .theme-split .vt-container { position: relative; } /* The background split is handled by bg-split class */ /* But theme-split adds text color adjustments for dark right side */ .theme-split .vt-footer { color: var(--vt-dark-text-muted); } /* ============================================ ANIMATED BACKGROUND EFFECTS ============================================ */ /* Animated gradient line */ body.bg-animated::before { background: linear-gradient( var(--vt-bg-angle, 60deg), var(--vt-bg-light-side), var(--vt-bg-light-side) ); animation: none; } body.bg-animated::after { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: -1; pointer-events: none; background: conic-gradient( from 0deg at 50% 50%, transparent 0deg, rgba(36, 87, 197, 0.06) 60deg, transparent 120deg, rgba(118, 75, 162, 0.04) 180deg, transparent 240deg, rgba(36, 87, 197, 0.06) 300deg, transparent 360deg ); animation: vt-bg-rotate 30s linear infinite; } @keyframes vt-bg-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================ COMBINED: ANGLED LINE + SPLIT DARK BG The angled line becomes a color transition ============================================ */ body.bg-angle-dark { --vt-bg-angle: 60deg; } body.bg-angle-dark::before { background: linear-gradient( var(--vt-bg-angle), var(--vt-bg-light-side) calc(var(--vt-bg-split-position, 45%) - var(--vt-bg-gap-width, 40px)), var(--vt-bg-accent) calc(var(--vt-bg-split-position, 45%) - var(--vt-bg-gap-width, 40px)), var(--vt-bg-accent-end) calc(var(--vt-bg-split-position, 45%) - 2px), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position, 45%) - 2px), var(--vt-bg-gap-color) calc(var(--vt-bg-split-position, 45%) + var(--vt-bg-gap-width, 40px)), var(--vt-bg-dark-side) calc(var(--vt-bg-split-position, 45%) + var(--vt-bg-gap-width, 40px)) ); } /* ============================================ CARD INNER ANGLED DECORATIVE LINE Adds a subtle diagonal accent inside the card ============================================ */ .theme-card-accent .vt-hero { position: relative; overflow: hidden; } .theme-card-accent .vt-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: linear-gradient( var(--vt-bg-angle, 60deg), transparent 48%, rgba(36, 87, 197, 0.04) 49%, rgba(36, 87, 197, 0.04) 51%, transparent 52% ); pointer-events: none; z-index: 0; } .theme-card-accent .vt-hero__content, .theme-card-accent .vt-hero__sidebar { position: relative; z-index: 1; } /* ============================================ RESPONSIVE ADJUSTMENTS FOR THEMES ============================================ */ @media (max-width: 900px) { /* On mobile, full-width card so bg effects matter less */ .theme-dark-sidebar .vt-hero__sidebar { margin: 0; border-radius: var(--vt-radius-md); } body.bg-split::before, body.bg-diagonal-split::before { /* On mobile use horizontal split instead */ background: linear-gradient( 180deg, var(--vt-bg-light-side) 30%, var(--vt-bg-dark-side) 70% ); } } /* ============================================ THEME SWITCHER UI (floating controls) ============================================ */ .vt-theme-switcher { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; font-family: var(--vt-font-family); } .vt-theme-switcher__btn { padding: 8px 14px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--vt-color-gray-200); border-radius: 8px; font-size: 12px; cursor: pointer; transition: all 0.15s; color: var(--vt-color-black); backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .vt-theme-switcher__btn:hover { background: var(--vt-brand-primary); color: white; border-color: var(--vt-brand-primary); } .vt-theme-switcher__btn.active { background: var(--vt-brand-primary); color: white; border-color: var(--vt-brand-primary); } .vt-theme-switcher__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vt-color-gray-500); font-weight: 600; padding: 0 4px; }