/* ========================================================================== Secure EvilEye — site.css Design tokens sourced from the Stitch "Optical Vanguard" design system. Bootstrap 5 provides the grid/utilities; this file provides the brand layer: tokens, typography, components, motion. ========================================================================== */ :root { /* Color tokens */ --color-primary: #0284C7; --color-primary-dark: #026594; --color-tertiary: #0EA5E9; --color-secondary: #0F172A; --color-surface: #FFFFFF; --color-surface-subtle: #F8FAFC; --color-surface-muted: #F1F5F9; --color-border: #E2E8F0; --color-border-strong: #CBD5E1; --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-text-muted: #94A3B8; --color-status-active: #10B981; --color-status-warning: #F59E0B; --color-status-alert: #EF4444; --glow-cyan: rgba(14, 165, 233, 0.22); /* Type */ --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Radius */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-pill: 9999px; /* Spacing (8pt rhythm) */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 6rem; /* Elevation */ --shadow-1: 0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 16px rgba(15, 23, 42, 0.03); --shadow-2: 0 12px 28px -4px rgba(15, 23, 42, 0.1), 0 4px 10px -2px rgba(15, 23, 42, 0.04); --shadow-glow: 0 0 24px 0 rgba(14, 165, 233, 0.28); } /* Allow Filament/Settings to override brand color at runtime later: injected in after this stylesheet. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-text-primary); background: var(--color-surface-subtle); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-secondary); letter-spacing: -0.02em; margin: 0; } a { text-decoration: none; color: inherit; } .container-xl { max-width: 1280px; } /* ---------- Eyebrow / label ---------- */ .label-mono { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--color-primary); } /* ---------- Buttons ---------- */ .btn-brand-primary { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.85rem 1.75rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .btn-brand-primary:hover { background: var(--color-tertiary); color: #fff; box-shadow: var(--shadow-glow); } .btn-brand-primary:active { transform: scale(0.98); } .btn-brand-secondary { background: var(--color-secondary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.85rem 1.75rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; transition: opacity 0.2s ease; } .btn-brand-secondary:hover { opacity: 0.88; color: #fff; } .btn-brand-ghost { background: transparent; color: var(--color-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.85rem 1.75rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; transition: border-color 0.2s ease, color 0.2s ease; } .btn-brand-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ---------- Header ---------- */ .site-header { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1030; } .site-header .navbar-brand { font-family: var(--font-display); font-weight: 800; color: var(--color-secondary); } .site-header .nav-link { font-family: var(--font-display); font-weight: 600; font-size: 0.925rem; color: var(--color-text-secondary) !important; padding: 0.5rem 1rem !important; } .site-header .nav-link.active, .site-header .nav-link:hover { color: var(--color-primary) !important; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%); overflow: hidden; position: relative; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.4rem 0.9rem; font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); } .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-status-active); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .hero-badge .dot { animation: none; } } .hero h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; } .hero h1 .accent { color: var(--color-primary); } .hero-stats { border-top: 1px solid var(--color-border); } .hero-stats .stat-num { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--color-secondary); } .hero-stats .stat-label { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.3; } /* Hero live feed panel */ .hud-panel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--color-border); position: relative; background: var(--color-secondary); } .hud-panel img { width: 100%; height: 100%; object-fit: cover; display: block; } .hud-overlay-top, .hud-overlay-bottom { position: absolute; left: 1rem; right: 1rem; font-size: 0.7rem; color: #fff; font-weight: 600; display: flex; justify-content: space-between; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .hud-overlay-top { top: 1rem; } .hud-overlay-bottom { bottom: 1rem; } .hud-status-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); } .hud-status-row .cell { background: #fff; padding: 0.85rem 1rem; border-right: 1px solid var(--color-border); } .hud-status-row .cell:last-child { border-right: none; } .hud-status-row .cell .k { font-size: 0.65rem; color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.04em; } .hud-status-row .cell .v { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--color-status-active); margin-top: 2px; } /* ---------- Brand strip ---------- */ .brand-strip { background: #fff; border-bottom: 1px solid var(--color-border); } .brand-strip .brand-name { font-family: var(--font-display); font-weight: 700; color: var(--color-text-muted); font-size: 0.95rem; opacity: 0.7; } /* ---------- Section heading ---------- */ .section-heading .accent-line { width: 40px; height: 3px; background: var(--color-primary); border-radius: 2px; margin-bottom: 1.1rem; } .section-heading h2 { font-size: clamp(1.65rem, 2.4vw, 2.15rem); font-weight: 700; line-height: 1.15; } .section-heading p { color: var(--color-text-secondary); font-size: 0.975rem; line-height: 1.7; } /* ---------- Hardware cards ---------- */ .hw-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; height: 100%; } .hw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--color-tertiary); } .hw-card .thumb { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--color-surface-muted); } .hw-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .hw-card .chip { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(15, 23, 42, 0.82); color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.3rem 0.6rem; border-radius: var(--radius-pill); } .hw-card .body { padding: 1.35rem; } .hw-card .kicker { font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.04em; margin-bottom: 0.4rem; } .hw-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; } .hw-card p { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 1rem; } .hw-card .specs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; } .hw-card .specs span { background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.55rem; border-radius: var(--radius-sm); } .hw-card .cta { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 2px; } /* ---------- Pillars ---------- */ .pillar-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; height: 100%; box-shadow: var(--shadow-1); transition: box-shadow 0.3s ease, transform 0.3s ease; } .pillar-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); } .pillar-card .icon-wrap { width: 46px; height: 46px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary)); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 1.25rem; } .pillar-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.65rem; } .pillar-card p { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 1rem; } .pillar-card .proof { font-size: 0.75rem; font-weight: 700; color: var(--color-status-active); display: flex; align-items: center; gap: 0.35rem; } /* ---------- Spec table ---------- */ .spec-table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); } .spec-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .spec-table thead th { background: var(--color-secondary); color: #fff; text-align: left; padding: 0.9rem 1.15rem; font-size: 0.7rem; letter-spacing: 0.05em; font-weight: 600; } .spec-table tbody td { padding: 0.9rem 1.15rem; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); } .spec-table tbody td:first-child { font-weight: 600; color: var(--color-text-primary); } .spec-table tbody tr:nth-child(even) { background: var(--color-surface-subtle); } .spec-table .sla { color: var(--color-primary); font-weight: 700; } /* ---------- Testimonials ---------- */ .testimonial-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; height: 100%; box-shadow: var(--shadow-1); } .testimonial-card .stars { color: #F59E0B; font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 0.9rem; } .testimonial-card p { font-size: 0.9rem; line-height: 1.7; color: var(--color-text-secondary); margin-bottom: 1.25rem; } .testimonial-card .who { display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--color-border); padding-top: 1rem; } .testimonial-card .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-surface-muted); color: var(--color-primary); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; } .testimonial-card .name { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; } .testimonial-card .role { font-size: 0.75rem; color: var(--color-text-muted); } /* ---------- CTA / Contact ---------- */ .cta-panel { background: var(--color-secondary); border-radius: var(--radius-xl); color: #fff; } .cta-panel .eyebrow { color: #7DD3FC; } .cta-panel h2 { color: #fff; } .cta-panel p { color: rgba(255,255,255,0.65); } .form-control, .form-select { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; font-size: 0.9rem; } .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); } .form-label-mono { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: var(--color-text-secondary); } /* ---------- Footer ---------- */ .site-footer { background: var(--color-secondary); color: rgba(255,255,255,0.6); } .site-footer h6 { color: #7DD3FC; font-size: 0.7rem; letter-spacing: 0.06em; margin-bottom: 1rem; } .site-footer a:hover { color: #fff; } .site-footer .bottom-bar { border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.75rem; } /* ---------- Utility ---------- */ .section-py { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); } @media (max-width: 767.98px) { .section-py { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } }