/* ========================================================================== EAGLES NEST — Default Brand Identity (Light · Ink + Gold) -------------------------------------------------------------------------- THE reference for this file is 001.html (Eagles Nest — Light theme redesign). It is the official Design System / visual identity for the whole platform. Loaded LAST on every PLATFORM surface (marketing site, master admin, store dashboard, app shell, Store Builder chrome) — after Bootstrap, design-system.css / style.css and admin.css. The base stylesheets (design-system.css / style.css / admin.css) are already a light system built on `--en-*` tokens; this file retargets those tokens to the 001 palette (white / canvas surfaces, INK black chrome, GOLD reserved for actions) and adds the component treatments 001 defines. Gold is for actions and accents — never large decorative fills. It does NOT touch the storefront theme system: public/themes/* and the themed customer shops keep their own per-store colours. Never loaded on storefront.blade.php. Requires data-bs-theme="light" on (set in the four platform layouts and the Store Builder chrome). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{ /* ---- 001 palette (locked) ---- */ --en-ink-900:#0E1013; /* ink — headings, dark chrome */ --en-ink-800:#1A1D22; /* ink-soft */ --en-ink-700:#23262B; /* ink hairline (on dark) */ --en-body:#3A4048; /* body text */ --en-muted-2:#767E88; /* muted text */ --en-canvas:#F7F6F3; /* soft page bg */ --en-hairline:#E7E5E0; /* borders */ --en-gold-50:#FDF7E6; /* tiles / tints */ --en-gold-100:#F6E6BC; /* tile borders / highlight */ --en-gold-500:#D9A521; /* buttons — the action colour */ --en-gold-600:#B4841A; /* button hover */ --en-gold-700:#8A6410; /* links / gold text on light */ --en-success:#12805C; --en-font:"Instrument Sans",-apple-system,"Segoe UI",Roboto,sans-serif; --en-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; /* ---- Retarget the platform's existing semantic tokens → 001 (light) ---- */ --en-blue:#D9A521; /* primary action → gold 500 */ --en-blue-600:#B4841A; --en-blue-700:#8A6410; /* links / accent → gold 700 */ --en-blue-bright:#D9A521; --en-navy:#0E1013; /* dark chrome → ink */ --en-navy-2:#1A1D22; --en-navy-3:#23262B; --en-ink:#0E1013; /* headings → ink */ --en-slate:#3A4048; /* body copy → text */ --en-muted:#767E88; /* tertiary text → muted */ --en-line:#E7E5E0; /* borders → hairline */ --en-soft:#F7F6F3; /* soft page bg → canvas */ --en-tint:#FDF7E6; /* accent tint bg → gold 50 */ --en-gold:#D9A521; --en-gold-2:#EBC66A; /* bright gold (for ink surfaces / stars) */ --en-gold-deep:#B4841A; --en-radius:16px; --en-radius-sm:10px; --en-shadow-sm:0 1px 2px rgba(14,16,19,.05), 0 1px 3px rgba(14,16,19,.04); --en-shadow:0 4px 6px -2px rgba(14,16,19,.05), 0 12px 24px -6px rgba(14,16,19,.10); --en-shadow-lg:0 24px 60px -20px rgba(14,16,19,.28); /* ---- Bootstrap 5.3 variables (cascade to every BS component, light) ---- */ --bs-body-bg:#FFFFFF; --bs-body-color:#3A4048; --bs-emphasis-color:#0E1013; --bs-secondary-color:#767E88; --bs-tertiary-color:#767E88; --bs-secondary-bg:#F7F6F3; --bs-tertiary-bg:#F7F6F3; --bs-border-color:#E7E5E0; --bs-primary:#D9A521; --bs-primary-rgb:217,165,33; --bs-link-color:#8A6410; --bs-link-color-rgb:138,100,16; --bs-link-hover-color:#B4841A; --bs-heading-color:#0E1013; --bs-code-color:#8A6410; } /* ============================ BASE ============================ */ body{ font-family:var(--en-font); background:#fff; color:var(--en-body); -webkit-font-smoothing:antialiased; } body.en-admin{ background:var(--en-canvas); } h1,h2,h3,h4,h5,h6{ color:var(--en-ink); font-weight:600; letter-spacing:-.025em; } a{ color:var(--en-gold-700); } a:hover{ color:var(--en-gold-600); } hr,.en-divider{ background:var(--en-hairline); border-color:var(--en-hairline); } .text-muted,.lead-muted,.small.text-muted{ color:var(--en-muted-2)!important; } .text-dark{ color:var(--en-ink)!important; } .text-accent,.text-en-blue{ color:var(--en-gold-700)!important; } .text-gold,.text-en-gold{ color:var(--en-gold-700)!important; } /* eyebrow — 001's mono label, the one structural device reused everywhere */ .eyebrow{ font-family:var(--en-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--en-gold-700); } .eyebrow.gold{ color:var(--en-gold-700); } .eyebrow.light{ color:var(--en-gold-600); } /* ============================ BUTTONS ============================ */ /* Solid gold = the action. Ink text, subtle lift on hover (001 .btn-gold). */ .btn-primary,.btn-en,.btn-gold{ background:var(--en-gold-500); border:1px solid transparent; color:var(--en-ink); font-weight:600; box-shadow:var(--en-shadow-sm); } .btn-primary:hover,.btn-en:hover,.btn-gold:hover, .btn-primary:focus,.btn-en:focus,.btn-gold:focus{ background:var(--en-gold-600); color:var(--en-ink); transform:translateY(-1px); box-shadow:var(--en-shadow); } /* Ghost = white + hairline, ink text (001 .btn-ghost). Covers the dark-hero button variants too, now that heroes are light. */ .btn-ghost,.btn-outline-en,.btn-outline-primary,.btn-ghost-dark,.btn-outline-light{ background:#fff; color:var(--en-ink); border:1px solid var(--en-hairline); } .btn-ghost:hover,.btn-outline-en:hover,.btn-outline-primary:hover, .btn-ghost-dark:hover,.btn-outline-light:hover{ background:var(--en-canvas); border-color:var(--en-ink); color:var(--en-ink); } /* Ink = solid black chrome button (001 .btn-ink). */ .btn-ink,.btn-dark{ background:var(--en-ink); color:#fff; border-color:var(--en-ink); } .btn-ink:hover,.btn-dark:hover{ background:var(--en-ink-800); color:#fff; } .btn-light,.btn-secondary{ background:#fff; border:1px solid var(--en-hairline); color:var(--en-ink); } .btn-light:hover,.btn-secondary:hover{ background:var(--en-canvas); color:var(--en-ink); border-color:var(--en-ink); } .btn-link{ color:var(--en-gold-700); } .btn-link:hover{ color:var(--en-gold-600); } .btn:focus,.btn:focus-visible{ box-shadow:0 0 0 3px rgba(217,165,33,.24); } /* ============================ NAVBAR / HEADER (ink) ============================ */ .en-nav,.navbar-dark{ background:var(--en-ink); border-bottom:1px solid var(--en-ink-700); } .en-nav .brand-text .name,.en-nav .navbar-brand{ color:#fff; } .en-nav .brand-text .tag{ color:#8B9099; } .en-nav .nav-link{ color:#C7CBD1!important; } .en-nav .nav-link:hover,.en-nav .nav-link.active, .en-nav.gold .nav-link.active{ color:#fff!important; } .en-nav .nav-link.active::after,.en-nav.gold .nav-link.active::after{ background:var(--en-gold-500); } .en-nav .btn-search{ color:#C7CBD1; } .en-nav .btn-login{ color:#fff; border-color:rgba(255,255,255,.28); } .en-nav .btn-login:hover{ background:rgba(255,255,255,.10); } /* ============================ HERO (light — 001) ============================ */ .hero-dark,.hero-gold,.hero-light{ background: radial-gradient(1100px 420px at 82% -8%, #FCF8EC 0%, rgba(255,255,255,0) 62%), #fff; color:var(--en-body); border-bottom:1px solid var(--en-hairline); } .hero-dark .display-1,.hero-dark .display-2,.hero-dark .display-3,.hero-dark .display-4, .hero-gold .display-1,.hero-gold .display-2,.hero-gold .display-3,.hero-gold .display-4, .hero-dark h1,.hero-dark h2,.hero-gold h1,.hero-gold h2{ color:var(--en-ink); } /* fix light-on-dark text that used to sit on the old dark hero */ .hero-dark .text-gold,.hero-gold .text-gold{ color:var(--en-gold-700)!important; } .hero-dark .text-white-50,.hero-gold .text-white-50, .hero-dark .text-white,.hero-gold .text-white, .hero-dark .text-light-emphasis,.hero-gold .text-light-emphasis{ color:var(--en-muted-2)!important; } .hero-dark .eyebrow,.hero-gold .eyebrow{ color:var(--en-gold-700); } /* glass-card aside → light card */ .glass-card{ background:#fff; border:1px solid var(--en-hairline); border-radius:var(--en-radius); box-shadow:var(--en-shadow); backdrop-filter:none; } /* ============================ SECTION HELPERS ============================ */ .bg-soft{ background:var(--en-canvas); } .bg-light{ background:var(--en-canvas)!important; } .text-accent{ color:var(--en-gold-700); } /* ============================ CARDS / SURFACES ============================ */ .card{ --bs-card-bg:#fff; --bs-card-color:var(--en-body); --bs-card-border-color:var(--en-hairline); --bs-card-cap-bg:var(--en-canvas); border-radius:var(--en-radius); } .feature-card,.stat-strip,.policy-card,.toc,.help-box,.eco-node,.side-card,.form-shell{ background:#fff; border-color:var(--en-hairline); color:var(--en-body); } .feature-card:hover,.industry-card:hover,.stat-card:hover{ box-shadow:var(--en-shadow); } .icon-chip,.icon-circle,.cat-card .ci,.benefit-row .bi-chip{ background:var(--en-gold-50); color:var(--en-gold-700); } .icon-chip.gold{ background:var(--en-gold-50); color:var(--en-gold-600); } .check-li{ color:var(--en-body); } .check-li i{ color:var(--en-gold-600); } .note-box{ background:var(--en-gold-50); border:1px solid var(--en-gold-100); color:var(--en-gold-700); } .q-item:hover,.cat-card:hover{ border-color:var(--en-gold-500); } .toc a:hover,.toc a.active{ background:var(--en-gold-50); color:var(--en-gold-700); } .tag-pill{ background:var(--en-gold-50); color:var(--en-gold-700); } .tag-pill.alt{ background:var(--en-canvas); color:var(--en-body); } /* Filled accent surfaces → INK (001 chrome), keeping their white text legible */ .trust-strip,.eco-center{ background:var(--en-ink); color:#fff; border-radius:var(--en-radius); } .trust-strip h1,.trust-strip h2,.trust-strip h3,.trust-strip h4,.trust-strip h5{ color:#fff; } .trust-strip .text-white-50{ color:rgba(255,255,255,.62)!important; } .trust-strip .ts-item i{ color:var(--en-gold-500); } .ask-card{ background:var(--en-ink); color:#fff; } /* ============================ FORMS ============================ */ .form-control,.form-select,.input-group-text{ background:#fff; color:var(--en-ink); border-color:var(--en-hairline); } .form-control::placeholder{ color:#A9AEB5; } .form-control:focus,.form-select:focus{ background:#fff; color:var(--en-ink); border-color:var(--en-gold-500); box-shadow:0 0 0 3px rgba(217,165,33,.16); } .input-icon i{ color:var(--en-gold-600); } .form-check-input:checked{ background-color:var(--en-gold-500); border-color:var(--en-gold-500); } .form-check-input:focus{ border-color:var(--en-gold-500); box-shadow:0 0 0 3px rgba(217,165,33,.16); } .en-form-label,.form-label{ color:var(--en-ink); } .en-form-hint,.form-text{ color:var(--en-muted-2); } /* ============================ TABLES ============================ */ .en-table thead th{ background:var(--en-canvas); color:var(--en-muted-2); border-color:var(--en-hairline); } .en-table tbody td{ color:var(--en-body); border-color:var(--en-hairline); } .en-table .td-primary{ color:var(--en-ink); } .en-table tbody tr:hover{ background:var(--en-canvas); } .en-table .cell-user .av{ background:var(--en-gold-50); color:var(--en-gold-700); } .table{ --bs-table-bg:transparent; --bs-table-color:var(--en-body); --bs-table-border-color:var(--en-hairline); --bs-table-striped-bg:var(--en-canvas); --bs-table-striped-color:var(--en-ink); --bs-table-hover-bg:var(--en-canvas); --bs-table-hover-color:var(--en-ink); color:var(--en-body); } .table>thead{ color:var(--en-muted-2); } /* ============================ BADGES ============================ */ .badge.bg-primary,.bg-primary{ background:var(--en-gold-500)!important; color:var(--en-ink)!important; } .badge.text-bg-primary{ background:var(--en-gold-500)!important; color:var(--en-ink)!important; } .en-badge.gold{ background:var(--en-gold-500); color:var(--en-ink); } .en-badge.info{ background:var(--en-gold-50); color:var(--en-gold-700); } .en-badge.neutral{ background:var(--en-canvas); color:var(--en-body); } .en-badge.success{ background:#E3F5EC; color:var(--en-success); } .en-badge.warning{ background:var(--en-gold-50); color:var(--en-gold-700); } .en-badge.danger{ background:#FBE9E9; color:#B42323; } /* ============================ ALERTS ============================ */ .alert-primary{ background:var(--en-gold-50); border-color:var(--en-gold-100); color:var(--en-gold-700); } .alert-success{ background:#E3F5EC; border-color:#B9E4CE; color:var(--en-success); } .alert-warning{ background:var(--en-gold-50); border-color:var(--en-gold-100); color:var(--en-gold-700); } .alert-danger{ background:#FBE9E9; border-color:#F1C4C4; color:#B42323; } .alert-info{ background:var(--en-gold-50); border-color:var(--en-gold-100); color:var(--en-gold-700); } /* ============================ ADMIN SHELL ============================ */ /* Ink sidebar + light content = the 001 look (ink chrome, light body). */ :root{ --en-sidebar-bg:#0E1013; --en-sidebar-bg-2:#15171B; } .en-sidebar{ background:linear-gradient(185deg,#0E1013 0%,#15171B 100%); color:#C7CBD1; border-right:1px solid var(--en-ink-700); } .en-sidebar .sb-brand{ border-bottom-color:var(--en-ink-700); } .en-sidebar .sb-brand .name{ color:#fff; } .en-sidebar .sb-brand .tag{ color:var(--en-gold-500); } .en-sidebar .sb-section{ color:#767E88; } .en-sidebar .sb-link{ color:#C7CBD1; } .en-sidebar .sb-link:hover{ background:rgba(217,165,33,.10); color:#fff; } .en-sidebar .sb-link.active{ background:var(--en-gold-500); color:var(--en-ink); box-shadow:0 8px 20px -10px rgba(217,165,33,.7); } .en-sidebar .sb-link.active i{ color:var(--en-ink); } .en-sidebar .sb-link.active::before{ background:var(--en-gold-100); } .en-sidebar .sb-link .sb-badge{ background:var(--en-gold-500); color:var(--en-ink); } .en-sidebar .sb-foot{ border-top-color:var(--en-ink-700); } .en-sidebar .sb-foot .av{ background:var(--en-gold-500); color:var(--en-ink); } .en-sidebar .sb-foot .nm{ color:#fff; } .en-sidebar .sb-foot .rl{ color:#9AA0A8; } /* Topbar — white (001) */ .en-topbar{ background:#fff; border-bottom-color:var(--en-hairline); } .en-topbar .tb-toggle{ background:var(--en-canvas); border-color:var(--en-hairline); color:var(--en-body); } .en-topbar .tb-toggle:hover{ background:var(--en-gold-50); color:var(--en-gold-700); } .en-topbar .tb-search input{ background:var(--en-canvas); border-color:var(--en-hairline); color:var(--en-ink); } .en-topbar .tb-search input:focus{ border-color:var(--en-gold-500); background:#fff; } .en-topbar .tb-search i{ color:var(--en-muted-2); } .en-topbar .tb-ico{ color:var(--en-body); } .en-topbar .tb-ico:hover{ background:var(--en-canvas); border-color:var(--en-hairline); } .en-topbar .tb-ico .dot{ border-color:#fff; background:var(--en-gold-500); } .en-topbar .tb-user{ background:#fff; border-color:var(--en-hairline); } .en-topbar .tb-user .av{ background:var(--en-ink); color:#fff; } .page-head .ph-sub,.en-breadcrumb,.en-breadcrumb a{ color:var(--en-muted-2); } .en-breadcrumb a:hover,.en-breadcrumb .cur{ color:var(--en-gold-700); } .stat-card .sc-value{ color:var(--en-ink); } .stat-card .sc-label{ color:var(--en-muted-2); } .stat-card .sc-ico.blue{ background:var(--en-gold-50); color:var(--en-gold-700); } .stat-card .sc-ico.gold{ background:var(--en-gold-50); color:var(--en-gold-600); } .stat-card .sc-ico.green{ background:#E3F5EC; color:var(--en-success); } .stat-card .sc-ico.red{ background:#FBE9E9; color:#B42323; } .stat-card .sc-ico.purple{ background:#EFEAFB; color:#6E56C6; } .en-card{ background:#fff; border-color:var(--en-hairline); } .en-card .en-card-head{ border-bottom-color:var(--en-hairline); } .en-card .en-card-head .sub{ color:var(--en-muted-2); } .table-toolbar,.en-pagination{ border-color:var(--en-hairline); } .table-toolbar .ts input{ background:var(--en-canvas); border-color:var(--en-hairline); color:var(--en-ink); } .table-toolbar .ts input:focus{ border-color:var(--en-gold-500); background:#fff; } .table-toolbar .ts i{ color:var(--en-muted-2); } .act-ico{ color:var(--en-muted-2); } .act-ico:hover{ background:var(--en-canvas); border-color:var(--en-hairline); color:var(--en-gold-700); } .en-empty,.en-pagination .pg-info{ color:var(--en-muted-2); } .en-empty i{ color:var(--en-hairline); } .en-pagination .page-link{ color:var(--en-body); background:#fff; border-color:var(--en-hairline); } .en-pagination .page-item.active .page-link{ background:var(--en-gold-500); border-color:var(--en-gold-500); color:var(--en-ink); } /* ============================ DROPDOWNS / MODALS ============================ */ .dropdown-menu{ background:#fff; border:1px solid var(--en-hairline); box-shadow:var(--en-shadow); --bs-dropdown-link-color:var(--en-body); --bs-dropdown-link-hover-bg:var(--en-canvas); --bs-dropdown-link-hover-color:var(--en-ink); --bs-dropdown-link-active-bg:var(--en-gold-500); --bs-dropdown-link-active-color:var(--en-ink); } .dropdown-item{ color:var(--en-body); } .dropdown-item:hover,.dropdown-item:focus{ background:var(--en-canvas); color:var(--en-ink); } .dropdown-item:active{ background:var(--en-gold-500); color:var(--en-ink); } .dropdown-divider{ border-color:var(--en-hairline); } .modal-content{ background:#fff; color:var(--en-body); border:1px solid var(--en-hairline); box-shadow:var(--en-shadow-lg); } .modal-header,.modal-footer{ border-color:var(--en-hairline); } /* ============================ NAV TABS / PILLS ============================ */ .nav-tabs{ border-bottom-color:var(--en-hairline); } .nav-tabs .nav-link{ color:var(--en-muted-2); border-color:transparent; } .nav-tabs .nav-link:hover{ color:var(--en-ink); border-color:var(--en-hairline); } .nav-tabs .nav-link.active{ color:var(--en-gold-700); background:#fff; border-color:var(--en-hairline) var(--en-hairline) #fff; } .nav-pills .nav-link.active{ background:var(--en-gold-500); color:var(--en-ink); } .list-group-item{ --bs-list-group-bg:#fff; --bs-list-group-color:var(--en-body); --bs-list-group-border-color:var(--en-hairline); --bs-list-group-action-hover-bg:var(--en-canvas); --bs-list-group-action-hover-color:var(--en-ink); } /* ============================ MISC ============================ */ .en-backdrop{ background:rgba(14,16,19,.5); } .accordion-button:not(.collapsed){ background:#fff; color:var(--en-gold-700); box-shadow:none; } .faq .accordion-button:not(.collapsed){ color:var(--en-gold-700); } .progress{ background:var(--en-canvas); } .progress-bar{ background:var(--en-gold-500); } :focus-visible{ outline-color:var(--en-gold-500); } /* ============================ FOOTER (ink) ============================ */ .en-footer{ background:var(--en-ink); color:#9AA0A8; border-top:1px solid var(--en-ink-700); } .en-footer h6,.en-footer .brand-name{ color:#fff; } .en-footer a{ color:#9AA0A8; } .en-footer a:hover{ color:var(--en-gold-500); } .en-footer .social{ background:rgba(255,255,255,.08); color:#cfd3d9; } .en-footer .social:hover{ background:var(--en-gold-500); color:var(--en-ink); } .en-footer .footer-bottom{ border-top-color:var(--en-ink-700); } .en-footer .legal-active{ color:var(--en-gold-500)!important; } .en-footer .legal-active-gold{ color:var(--en-gold-500)!important; } /* Trial / subscription strips — 001 amber/red tints on light. */ .en-trial-strip--trial{ background:var(--en-gold-50); border-color:var(--en-gold-100); color:var(--en-gold-700); } .en-trial-strip--trial .en-trial-strip__cta{ background:var(--en-gold-500); color:var(--en-ink); } .en-trial-strip--urgent{ background:#FFF1E6; border-color:#F7B97F; color:#8A3D00; } .en-trial-strip--urgent .en-trial-strip__cta{ background:#C2410C; color:#fff; } .en-trial-strip--expired{ background:#FBE9E9; border-color:#F1C4C4; color:#8A1F1F; } .en-trial-strip--expired .en-trial-strip__cta{ background:#B91C1C; color:#fff; }