/* ======================================================================== DNSai Core Palette — CSS Custom Properties ======================================================================== Version: 3.0 Updated: 2026-04-15 Default: Dark Mode Source: dnsai.com, dnsai.com/search/, dnsai.com/dns-records/ ======================================================================== Usage: Link this file in before any component styles. All colors reference these variables so changing a value here propagates everywhere automatically. ======================================================================== */ /* ======================================================================== 1. BRAND IDENTITY ======================================================================== */ :root { /* Primary brand colors */ --brand-cyan: #26c4ff; --brand-blue: #0054ff; --brand-blue-dark: #0447D3; --brand-blue-alt: #0048d4; --brand-blue-light: #007aff; /* Brand gradients */ --brand-gradient: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%); --brand-gradient-135: linear-gradient(135deg, #26c4ff 0%, #0054ff 100%); --brand-gradient-hover: linear-gradient(90deg, #0048d4 0%, #007aff 100%); --btn-secondary-gradient: linear-gradient(to bottom, #0054FF, #0447D3); /* Glow colors (used in drop-shadows and box-shadows) */ --glow-primary: #26B6FE; --glow-secondary: #0054FF; } /* ======================================================================== 2. STATUS & SEMANTIC COLORS (mode-independent) ======================================================================== */ :root { --color-success: #00c853; --color-warning: #ffab00; --color-error: #ff1744; --color-info: #40a8ff; --color-disabled-bg: #5a5a5a; --color-disabled-text: #999999; } /* ======================================================================== 3. DATA VISUALIZATION (mode-independent) ======================================================================== */ :root { --data-pink: #FC6FCF; --data-steel: #97B8D5; --data-gold: #D3D212; --data-header: #40a8ff; } /* ======================================================================== 4. DNS RECORD-TYPE COLORS (mode-independent) ======================================================================== Each DNS record type gets its own accent color so records are visually distinct when listed together. Applied to the type label, left-border accent stripe, and bottom-border on the section header. ======================================================================== */ :root { /* ── Core Types ── */ --dns-a: #26c4ff; /* A — IPv4 Address */ --dns-aaaa: #7c3aed; /* AAAA — IPv6 Address */ --dns-cname: #06b6d4; /* CNAME — Canonical Name */ --dns-mx: #10b981; /* MX — Mail Exchange */ --dns-txt: #f59e0b; /* TXT — Text */ --dns-ns: #3b82f6; /* NS — Name Server */ --dns-soa: #6366f1; /* SOA — Start of Authority */ --dns-srv: #14b8a6; /* SRV — Service Locator */ --dns-ptr: #f97316; /* PTR — Pointer / Reverse */ --dns-caa: #ef4444; /* CAA — Cert Authority Auth */ /* ── Email / Authentication ── */ --dns-spf: #f59e0b; /* SPF */ --dns-dmarc: #ec4899; /* DMARC */ --dns-dkim: #22c55e; /* DKIM */ --dns-bimi: #8b5cf6; /* BIMI */ --dns-email-gw: #10b981; /* Email Gateway */ /* ── Modern / Service ── */ --dns-https: #a855f7; /* HTTPS */ --dns-svcb: #9333ea; /* SVCB */ --dns-uri: #06b6d4; /* URI */ --dns-naptr: #0891b2; /* NAPTR */ --dns-dname: #22d3ee; /* DNAME */ /* ── DNSSEC ── */ --dns-dnskey: #4f46e5; /* DNSKEY */ --dns-ds: #6366f1; /* DS */ --dns-rrsig: #818cf8; /* RRSIG */ --dns-nsec: #a5b4fc; /* NSEC */ --dns-nsec3: #c7d2fe; /* NSEC3 */ --dns-cds: #4f46e5; /* CDS */ --dns-cdnskey: #6366f1; /* CDNSKEY */ --dns-zonemd: #818cf8; /* ZONEMD */ /* ── Security / Key ── */ --dns-tlsa: #fb923c; /* TLSA */ --dns-sshfp: #fdba74; /* SSHFP */ --dns-ipseckey: #f97316; /* IPSECKEY */ --dns-openpgpkey: #fb923c; /* OPENPGPKEY */ --dns-smimea: #fdba74; /* SMIMEA */ /* ── Geo / Location ── */ --dns-loc: #059669; /* LOC */ --dns-apl: #10b981; /* APL */ --dns-hip: #34d399; /* HIP */ --dns-csync: #6ee7b7; /* CSYNC */ /* ── Geo Metadata ── */ --dns-geo-country: #0ea5e9; --dns-geo-city: #38bdf8; --dns-geo-region: #7dd3fc; --dns-geo-lat: #06b6d4; --dns-geo-lon: #22d3ee; /* ── Data / Meta ── */ --dns-mx-host-ip: #10b981; --dns-mx-host-asn: #34d399; --dns-mx-host-loc: #059669; --dns-a-asn: #3b82f6; --dns-a-ip-loc: #60a5fa; --dns-tech: #6366f1; --dns-timestamp: #6b7280; --dns-domain: #ffffff; --dns-default: #9ca3af; } /* ======================================================================== 5. TYPOGRAPHY ======================================================================== */ :root { /* Font Family Stack */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'Courier New', Courier, monospace; --font-code: 'SF Mono', 'Fira Code', monospace; /* Font Sizes */ --text-xs: 10px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 32px; --text-5xl: 48px; /* Heading Sizes */ --heading-hero: 4rem; --heading-hero-mobile: 2.5rem; --heading-h1: 2.75rem; --heading-h2: 2rem; --heading-h3: 1.5rem; --heading-h4: 1.25rem; --heading-page: 1.75rem; --heading-lookup: 2.5rem; --heading-lookup-mobile: 2rem; /* Font Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Letter Spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.5px; --tracking-wider: 0.8px; --tracking-widest: 1.5px; } /* ======================================================================== 6. SPACING & LAYOUT ======================================================================== */ :root { /* Container Max Widths */ --container-sm: 540px; --container-md: 800px; --container-lg: 1100px; --container-xl: 1200px; --container-form: 540px; --container-form-wide: 580px; --container-hero: 900px; /* Spacing Scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Gaps */ --gap-xs: 8px; --gap-sm: 12px; --gap-md: 16px; --gap-lg: 20px; --gap-xl: 24px; --gap-2xl: 32px; --gap-3xl: 40px; } /* ======================================================================== 7. BORDER RADIUS ======================================================================== */ :root { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 14px; --radius-4xl: 16px; --radius-form: 24px; --radius-pill: 50px; --radius-full: 9999px; } /* ======================================================================== 8. TRANSITIONS & ANIMATIONS ======================================================================== */ :root { /* Timing Functions */ --ease-default: ease; --ease-in-out: ease-in-out; --ease-material: cubic-bezier(0.4, 0, 0.2, 1); /* Durations */ --duration-fast: 0.15s; --duration-quick: 0.2s; --duration-normal: 0.3s; --duration-moderate: 0.35s; --duration-slow: 0.5s; /* Combined Transitions */ --transition-fast: all 0.15s ease; --transition-normal: all 0.3s ease; --transition-material: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* ======================================================================== 9. DARK MODE (default) ======================================================================== Applied to :root and [data-theme="dark"]. Because dark is the default, these values are present even when no data-theme attribute exists. ======================================================================== */ :root, [data-theme="dark"] { /* Backgrounds */ --bg-body: #000000; --bg-body-gradient: linear-gradient(120deg, #000000, #0a0a0a); --bg-section: #111111; --bg-surface: #1a1a1a; --bg-card: #222222; --bg-input: rgba(255, 255, 255, 0.04); --bg-input-hover: rgba(255, 255, 255, 0.06); --bg-input-focus: rgba(255, 255, 255, 0.08); --bg-footer: #191919; --bg-overlay: rgba(0, 0, 0, 0.6); --bg-modal-overlay: rgba(8, 34, 67, 0.5); --bg-backdrop: rgba(0, 0, 0, 0.7); --bg-feature-card: linear-gradient(135deg, #0a2a54 0%, #104a8a 100%); --bg-dark-card: linear-gradient(to bottom, #1f1f1f, #191919); --bg-hero-overlay: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); --bg-dropdown: linear-gradient(135deg, #191919 0%, #333333 100%); --bg-form: linear-gradient(135deg, rgba(17,17,17,0.98) 0%, rgba(26,26,26,0.98) 100%); --bg-results-header: linear-gradient(135deg, rgba(0,84,255,0.05) 0%, rgba(38,196,255,0.05) 100%); --bg-record-box: rgba(255, 255, 255, 0.03); --bg-record-box-hover: rgba(255, 255, 255, 0.05); --bg-action-btn: rgba(255, 255, 255, 0.05); --bg-action-btn-hover: rgba(38, 196, 255, 0.15); --bg-tool-link: rgba(0, 84, 255, 0.1); --bg-tool-link-hover: rgba(0, 84, 255, 0.2); /* Text */ --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #999999; --text-dimmed: #888888; --text-placeholder: #666666; --text-subtle: rgba(255, 255, 255, 0.45); /* Borders */ --border-default: #333333; --border-emphasis: #555555; --border-hover: #777777; --border-input: rgba(255, 255, 255, 0.12); --border-input-hover: rgba(255, 255, 255, 0.22); --border-input-focus: #26c4ff; --border-focus: #26c4ff; --border-subtle: rgba(255, 255, 255, 0.07); --border-light: rgba(255, 255, 255, 0.1); --border-medium: rgba(255, 255, 255, 0.15); --border-strong: rgba(255, 255, 255, 0.2); /* Links & Accent */ --accent: var(--brand-cyan); --link: var(--brand-cyan); --link-content: #40a8ff; /* Focus rings & glows */ --focus-ring: rgba(38, 196, 255, 0.3); --card-hover-glow: 0 4px 15px rgba(0, 84, 255, 0.4); --card-shadow: none; --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); --input-focus-glow: 0 0 0 4px rgba(38, 196, 255, 0.15), 0 6px 24px rgba(38, 196, 255, 0.2); --btn-glow: 0 4px 14px rgba(38, 196, 255, 0.25); --btn-glow-strong: 0 6px 20px rgba(38, 196, 255, 0.35); --form-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08); --results-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); /* Nav */ --nav-bg-top: rgba(0, 0, 0, 0); --nav-bg-scrolled: rgba(0, 0, 0, 0.95); --nav-blur-scrolled: 10px; --nav-shadow-scrolled: 0 2px 12px rgba(0, 0, 0, 0.3); --nav-link: #ffffff; --nav-link-hover: #26c4ff; --nav-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Flyout */ --flyout-bg: #1a1a1a; --flyout-border: 1px solid rgba(255, 255, 255, 0.1); --flyout-shadow: -8px 0 40px rgba(0, 0, 0, 0.8); --flyout-link: #ffffff; --flyout-link-hover-bg: rgba(38, 196, 255, 0.12); --flyout-link-hover: #26c4ff; --flyout-section-header: #26c4ff; --flyout-close: #999999; --flyout-close-hover: #ffffff; /* Buttons — Primary */ --btn-primary-bg: var(--brand-gradient); --btn-primary-bg-hover: var(--brand-gradient-hover); --btn-primary-text: #ffffff; --btn-primary-border: #26c4ff; --btn-primary-shadow: 0 4px 12px rgba(38, 196, 255, 0.3); --btn-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Buttons — Outline / Ghost */ --btn-outline-text: #26c4ff; --btn-outline-border: #26c4ff; --btn-outline-hover-bg: rgba(38, 196, 255, 0.1); /* Buttons — Secondary */ --btn-secondary-bg: rgba(255, 255, 255, 0.06); --btn-secondary-border: rgba(255, 255, 255, 0.12); --btn-secondary-text: #ffffff; /* DNS Button (pill) */ --dns-btn-text: #ffffff; --dns-btn-border: #ffffff; --dns-btn-hover-bg: #ffffff; --dns-btn-hover-text: #000000; /* Action Buttons */ --action-btn-bg: rgba(255, 255, 255, 0.05); --action-btn-border: rgba(255, 255, 255, 0.15); --action-btn-hover-bg: rgba(38, 196, 255, 0.15); --action-btn-hover-border: #26c4ff; /* Tool Links */ --tool-link-bg: rgba(0, 84, 255, 0.1); --tool-link-border: rgba(0, 84, 255, 0.3); --tool-link-hover-bg: rgba(0, 84, 255, 0.2); --tool-link-hover-border: #0054ff; --tool-link-color: #26c4ff; /* Code blocks */ --code-text: #26c4ff; --code-bg: #1a1a1a; /* Mode toggle track */ --toggle-track: #666666; --toggle-track-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Error box */ --error-bg: #2a0f0f; --error-border: #602b2b; --error-text: #ffd6d6; /* Notification */ --notification-bg: #0F1926; --notification-border: #97B8D5; /* Backdrop filter */ --blur-sm: blur(4px); --blur-md: blur(8px); --blur-lg: blur(10px); --blur-xl: blur(16px); /* Record Box */ --record-box-bg: rgba(255, 255, 255, 0.03); --record-box-border: rgba(255, 255, 255, 0.1); --record-box-hover-bg: rgba(255, 255, 255, 0.05); --record-box-hover-border: rgba(255, 255, 255, 0.2); /* Search Results */ --search-results-bg: #2C2C2C; --search-results-hover: #3A3A3A; } /* ======================================================================== 10. LIGHT MODE ======================================================================== */ [data-theme="light"] { /* Backgrounds */ --bg-body: #ffffff; --bg-body-gradient: linear-gradient(120deg, #ffffff, #f9f9f9); --bg-section: #f1f1f1; --bg-surface: #f9f9f9; --bg-card: #f9f9f9; --bg-input: #ffffff; --bg-input-hover: #fafafa; --bg-input-focus: #fcfcfc; --bg-footer: #E6E6E6; --bg-overlay: rgba(0, 0, 0, 0.4); --bg-modal-overlay: rgba(8, 34, 67, 0.3); --bg-backdrop: rgba(0, 0, 0, 0.5); --bg-dropdown: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%); --bg-form: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(249,249,249,0.98) 100%); --bg-results-header: linear-gradient(135deg, rgba(0,84,255,0.03) 0%, rgba(38,196,255,0.03) 100%); --bg-record-box: rgba(0, 0, 0, 0.02); --bg-record-box-hover: rgba(0, 0, 0, 0.04); --bg-action-btn: rgba(0, 0, 0, 0.04); --bg-action-btn-hover: rgba(0, 84, 255, 0.1); --bg-tool-link: rgba(0, 84, 255, 0.08); --bg-tool-link-hover: rgba(0, 84, 255, 0.15); /* Text */ --text-primary: #000000; --text-secondary: #282828; --text-muted: #555555; --text-dimmed: #666666; --text-placeholder: #999999; --text-subtle: rgba(0, 0, 0, 0.45); /* Borders */ --border-default: #cccccc; --border-emphasis: #e5e5e5; --border-hover: #999999; --border-input: rgba(0, 0, 0, 0.12); --border-input-hover: rgba(0, 0, 0, 0.22); --border-input-focus: #0054ff; --border-focus: #0054ff; --border-subtle: rgba(0, 0, 0, 0.05); --border-light: rgba(0, 0, 0, 0.1); --border-medium: rgba(0, 0, 0, 0.15); --border-strong: rgba(0, 0, 0, 0.2); /* Links & Accent */ --accent: var(--brand-blue); --link: var(--brand-blue); --link-content: #0054ff; /* Focus rings & shadows */ --focus-ring: rgba(0, 84, 255, 0.2); --card-hover-glow: none; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --input-focus-glow: 0 0 0 3px rgba(0, 84, 255, 0.2); --btn-glow: 0 4px 14px rgba(0, 84, 255, 0.2); --btn-glow-strong: 0 6px 20px rgba(0, 84, 255, 0.25); --form-shadow: 0 12px 48px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5); --results-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Nav */ --nav-bg-top: rgba(255, 255, 255, 1); --nav-bg-scrolled: rgba(255, 255, 255, 1); --nav-blur-scrolled: 10px; --nav-shadow-scrolled: 0 2px 8px rgba(0, 0, 0, 0.1); --nav-link: #000000; --nav-link-hover: #0054ff; --nav-text-shadow: none; /* Flyout */ --flyout-bg: #ffffff; --flyout-border: 1px solid rgba(0, 0, 0, 0.12); --flyout-shadow: -8px 0 40px rgba(0, 0, 0, 0.15); --flyout-link: #1a1a1a; --flyout-link-hover-bg: rgba(0, 84, 255, 0.08); --flyout-link-hover: #0054ff; --flyout-section-header: #0054ff; --flyout-close: #666666; --flyout-close-hover: #1a1a1a; /* Buttons — Primary (same as dark) */ --btn-primary-bg: var(--brand-gradient); --btn-primary-bg-hover: var(--brand-gradient-hover); --btn-primary-text: #ffffff; --btn-primary-border: #26c4ff; --btn-primary-shadow: 0 4px 12px rgba(0, 84, 255, 0.25); /* Buttons — Outline / Ghost */ --btn-outline-text: #0054ff; --btn-outline-border: #0054ff; --btn-outline-hover-bg: rgba(0, 84, 255, 0.1); /* Buttons — Secondary */ --btn-secondary-bg: rgba(0, 0, 0, 0.04); --btn-secondary-border: rgba(0, 0, 0, 0.12); --btn-secondary-text: #000000; /* DNS Button (pill) */ --dns-btn-text: #000000; --dns-btn-border: #000000; --dns-btn-hover-bg: #000000; --dns-btn-hover-text: #ffffff; /* Action Buttons */ --action-btn-bg: rgba(0, 0, 0, 0.04); --action-btn-border: rgba(0, 0, 0, 0.12); --action-btn-hover-bg: rgba(0, 84, 255, 0.1); --action-btn-hover-border: #0054ff; /* Tool Links */ --tool-link-bg: rgba(0, 84, 255, 0.08); --tool-link-border: rgba(0, 84, 255, 0.2); --tool-link-hover-bg: rgba(0, 84, 255, 0.15); --tool-link-hover-border: #0054ff; --tool-link-color: #0054ff; /* Code blocks */ --code-text: #0054ff; --code-bg: #f1f1f1; /* Mode toggle track */ --toggle-track: #999999; --toggle-track-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Error box */ --error-bg: #ffe6e6; --error-border: #d4a0a0; --error-text: #8b0000; /* Notification */ --notification-bg: #f0f4f8; --notification-border: #97B8D5; /* Record Box */ --record-box-bg: rgba(0, 0, 0, 0.02); --record-box-border: rgba(0, 0, 0, 0.08); --record-box-hover-bg: rgba(0, 0, 0, 0.04); --record-box-hover-border: rgba(0, 0, 0, 0.15); /* Search Results */ --search-results-bg: #ffffff; --search-results-hover: #f0f0f0; } /* ======================================================================== 11. GRADIENTS REFERENCE ======================================================================== */ :root { --gradient-brand: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%); --gradient-brand-hover: linear-gradient(90deg, #0048d4 0%, #007aff 100%); --gradient-brand-135: linear-gradient(135deg, #26c4ff 0%, #0054ff 100%); --gradient-secondary: linear-gradient(to bottom, #0054FF, #0447D3); --gradient-feature-card: linear-gradient(135deg, #0a2a54 0%, #104a8a 100%); --gradient-dark-card: linear-gradient(to bottom, #1f1f1f, #191919); --gradient-hero-overlay: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); --gradient-dropdown-dark: linear-gradient(135deg, #191919 0%, #333333 100%); --gradient-dropdown-light: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%); --gradient-modal: linear-gradient(to bottom, #191919, #333333); --gradient-hero-radial: radial-gradient(ellipse at center, #1157E7 0%, #0D45C8 35%, #062A9B 65%, #00006D 100%); --gradient-promo: linear-gradient(135deg, navy 0%, #0F80FF 100%); /* Animated gradient (for form borders) */ --gradient-animated: linear-gradient(90deg, #26c4ff 0%, #0054ff 50%, #26c4ff 100%); } /* ======================================================================== 12. BOX SHADOWS REFERENCE ======================================================================== */ :root { /* Subtle */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); /* Standard */ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2); --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.25); /* Card shadows */ --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5); /* Menu shadows */ --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-flyout: -8px 0 40px rgba(0, 0, 0, 0.8); /* Glow shadows */ --shadow-glow-cyan: 0 0 0 3px rgba(38, 196, 255, 0.3); --shadow-glow-blue: 0 0 0 3px rgba(0, 84, 255, 0.2); --shadow-glow-btn: 0 4px 14px rgba(38, 196, 255, 0.25); --shadow-glow-hero: 0 0 45px #26B6FE, 0 0 18px #0054FF; /* Inset shadows */ --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.08); --shadow-inset-medium: inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* ======================================================================== 13. UTILITY CLASSES ======================================================================== */ /* Apply brand gradient text */ .text-brand-gradient { background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Status badge helpers */ .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } .text-info { color: var(--color-info); } .bg-success { background-color: var(--color-success); } .bg-warning { background-color: var(--color-warning); } .bg-error { background-color: var(--color-error); } .bg-info { background-color: var(--color-info); } /* DNS record type label colors — apply to record-type header element */ .dns-type-a { color: var(--dns-a); } .dns-type-aaaa { color: var(--dns-aaaa); } .dns-type-cname { color: var(--dns-cname); } .dns-type-mx { color: var(--dns-mx); } .dns-type-txt { color: var(--dns-txt); } .dns-type-ns { color: var(--dns-ns); } .dns-type-soa { color: var(--dns-soa); } .dns-type-srv { color: var(--dns-srv); } .dns-type-ptr { color: var(--dns-ptr); } .dns-type-caa { color: var(--dns-caa); } .dns-type-spf { color: var(--dns-spf); } .dns-type-dmarc { color: var(--dns-dmarc); } .dns-type-dkim { color: var(--dns-dkim); } .dns-type-bimi { color: var(--dns-bimi); } .dns-type-https { color: var(--dns-https); } .dns-type-svcb { color: var(--dns-svcb); } .dns-type-uri { color: var(--dns-uri); } .dns-type-naptr { color: var(--dns-naptr); } .dns-type-dname { color: var(--dns-dname); } .dns-type-dnskey { color: var(--dns-dnskey); } .dns-type-ds { color: var(--dns-ds); } .dns-type-rrsig { color: var(--dns-rrsig); } .dns-type-nsec { color: var(--dns-nsec); } .dns-type-nsec3 { color: var(--dns-nsec3); } .dns-type-tlsa { color: var(--dns-tlsa); } .dns-type-sshfp { color: var(--dns-sshfp); } .dns-type-loc { color: var(--dns-loc); } /* DNS record type left-border accent stripe (3px left border) */ .dns-border-a { border-left: 3px solid var(--dns-a); } .dns-border-aaaa { border-left: 3px solid var(--dns-aaaa); } .dns-border-cname { border-left: 3px solid var(--dns-cname); } .dns-border-mx { border-left: 3px solid var(--dns-mx); } .dns-border-txt { border-left: 3px solid var(--dns-txt); } .dns-border-ns { border-left: 3px solid var(--dns-ns); } .dns-border-soa { border-left: 3px solid var(--dns-soa); } .dns-border-srv { border-left: 3px solid var(--dns-srv); } .dns-border-ptr { border-left: 3px solid var(--dns-ptr); } .dns-border-caa { border-left: 3px solid var(--dns-caa); } .dns-border-spf { border-left: 3px solid var(--dns-spf); } .dns-border-dmarc { border-left: 3px solid var(--dns-dmarc); } .dns-border-dkim { border-left: 3px solid var(--dns-dkim); } .dns-border-bimi { border-left: 3px solid var(--dns-bimi); } .dns-border-https { border-left: 3px solid var(--dns-https); } .dns-border-svcb { border-left: 3px solid var(--dns-svcb); } .dns-border-dnskey { border-left: 3px solid var(--dns-dnskey); } .dns-border-ds { border-left: 3px solid var(--dns-ds); } .dns-border-tlsa { border-left: 3px solid var(--dns-tlsa); } .dns-border-loc { border-left: 3px solid var(--dns-loc); } /* ======================================================================== 14. KEYFRAME ANIMATIONS ======================================================================== */ /* Fade in with slide up */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Gradient shift animation (for animated borders) */ @keyframes gradientShift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 0%; } } /* Spin animation (for loaders) */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Dot pulse animation (for loading dots) */ @keyframes dotPulse { 0%, 80%, 100% { transform: scale(0.5); } 40% { transform: scale(1); } } /* Shimmer effect */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ======================================================================== 15. COMPONENT TOKEN GROUPS ======================================================================== */ /* Form Input Tokens */ :root, [data-theme="dark"] { --input-padding: 18px 20px; --input-padding-sm: 12px 16px; --input-radius: 14px; --input-border-width: 2px; --input-font-size: 15px; --input-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Button Tokens */ :root { --btn-padding: 14px 26px; --btn-padding-sm: 10px 18px; --btn-padding-lg: 16px 32px; --btn-radius: 12px; --btn-radius-pill: 50px; --btn-font-size: 15px; --btn-font-size-sm: 13px; --btn-font-size-lg: 18px; --btn-font-weight: 600; --btn-transition: all 0.2s ease; } /* Card Tokens */ :root { --card-padding: 20px; --card-padding-lg: 24px; --card-radius: 12px; --card-radius-lg: 16px; --card-transition: all 0.3s ease; } /* Nav Tokens */ :root { --nav-height: 60px; --nav-padding: 14px 20px; --nav-padding-wide: 18px 40px; --nav-link-padding: 8px 12px; --nav-link-gap: 8px; --nav-transition: all 0.3s ease; --nav-z-index: 1300; } /* Flyout Tokens */ :root { --flyout-width: 320px; --flyout-padding: 70px 24px 24px; --flyout-link-padding: 13px 16px; --flyout-link-min-height: 44px; --flyout-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); --flyout-z-index: 1200; } /* Modal Tokens */ :root { --modal-z-index: 1400; --modal-backdrop-z-index: 1399; --modal-transition: all 0.3s ease; }