/* ============================================================================ Cenvero — "Datasheet / Blueprint" theme layer. A distinct personality for the PUBLIC marketing site, layered on top of cenvero.css. Everything is scoped under `.theme-blueprint` (set on of layouts/public.blade.php) so the admin panel is never affected. Same foundation (warm paper + ink, the 3 fonts, the gradient) — but the page reads like a hardware datasheet / engineering schematic: graph-paper grid instead of soft auroras, crisp corners, hairline technical frames with corner reticles, mono margin annotations, and datasheet spec rows with dotted leaders. ============================================================================ */ /* --- Crisper, more technical corners everywhere on the public site --- */ .theme-blueprint .surface { border-radius: 4px; } .theme-blueprint .surface--edge::before { border-radius: 4px 4px 0 0; } .theme-blueprint .btn { border-radius: 4px; } .theme-blueprint .input, .theme-blueprint .select, .theme-blueprint .textarea { border-radius: 4px; } .theme-blueprint .site-header__bar { border-radius: 8px; } .theme-blueprint .brand__mark { border-radius: 5px; } /* --- Background: graph-paper grid replaces the soft glow ------------------- */ /* Keep one faint warm aurora for warmth; the grid is the signature. */ .theme-blueprint .site-atmos .aurora--teal { opacity: .55; } .theme-blueprint .site-atmos .aurora--indigo { opacity: .30; } .theme-blueprint .site-atmos .aurora--violet { opacity: .45; } .blueprint-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(26,24,32,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(26,24,32,.06) 1px, transparent 1px), linear-gradient(to right, rgba(26,24,32,.032) 1px, transparent 1px), linear-gradient(to bottom, rgba(26,24,32,.032) 1px, transparent 1px); background-size: 150px 150px, 150px 150px, 30px 30px, 30px 30px; -webkit-mask-image: radial-gradient(ellipse 120% 85% at 50% -8%, #000 48%, transparent 100%); mask-image: radial-gradient(ellipse 120% 85% at 50% -8%, #000 48%, transparent 100%); } /* --- Technical frame with inset corner reticles ---------------------------- */ /* The 4 "+" reticles are 4 background layers; an optional paper fill is the LAST layer (painted at the back, so the reticles stay visible on top). */ .theme-blueprint .tframe { position: relative; border: 1px solid var(--line-2); border-radius: 4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%239b958c' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%239b958c' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%239b958c' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%239b958c' stroke-width='1'/%3E%3C/svg%3E"); background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px); background-repeat: no-repeat; background-size: 9px 9px; } .theme-blueprint .tframe--fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%239b958c' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%239b958c' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%239b958c' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%239b958c' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(160deg, #fffefb 0%, #fbf8f2 100%); background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), 0 0; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-size: 9px 9px, 9px 9px, 9px 9px, 9px 9px, cover; box-shadow: var(--card-shadow); } /* --- Mono margin annotations / figure labels ------------------------------- */ .theme-blueprint .anno { font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint-hex); } .theme-blueprint .anno--accent { color: var(--accent-ink); } .theme-blueprint .anno--tr { position: absolute; top: .85rem; right: 1.05rem; z-index: 1; } .theme-blueprint .anno--tl { position: absolute; top: .85rem; left: 1.05rem; z-index: 1; } .theme-blueprint .anno--bl { position: absolute; bottom: .85rem; left: 1.05rem; z-index: 1; } /* Figure / section index label, e.g. "FIG. 01 —" */ .theme-blueprint .fig { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); } .theme-blueprint .fig::after { content: ""; width: 30px; height: 1px; background: var(--line-2); } /* A section header that sits under a full hairline rule (schematic divider). */ .theme-blueprint .bp-head { border-top: 1px solid var(--line-2); padding-top: 1.4rem; } .theme-blueprint .bp-rule { height: 1px; background: var(--line-2); } /* --- Bracketed mono chip: [ SDN · L2–L7 · eBPF ] --------------------------- */ .theme-blueprint .bp-chip { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft-hex); border: 1px solid var(--line-2); border-radius: 4px; padding: .42rem .7rem; background: rgba(255,253,248,.6); } .theme-blueprint .bp-chip::before { content: "["; color: var(--accent-ink); margin-right: .1rem; } .theme-blueprint .bp-chip::after { content: "]"; color: var(--accent-ink); margin-left: .1rem; } .theme-blueprint .bp-chip .dot { width: .4rem; height: .4rem; border-radius: 50%; } /* --- Datasheet spec rows: key ........... value ---------------------------- */ .theme-blueprint .specrow { display: flex; align-items: baseline; gap: .7rem; font-family: var(--font-mono); font-size: .82rem; line-height: 2.1; } .theme-blueprint .specrow__key { color: var(--faint-hex); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } .theme-blueprint .specrow__lead { flex: 1 1 auto; border-bottom: 1px dotted var(--line-2); transform: translateY(-.28em); min-width: 1.5rem; } .theme-blueprint .specrow__val { color: var(--ink-hex); white-space: nowrap; font-weight: 500; } .theme-blueprint .specrow__val .grad-text-static { font-weight: 600; } /* --- Blueprint table tweak (comparison): tighter, ledger-like ------------- */ .theme-blueprint .surface table thead tr { background: rgba(26,24,32,.025); } /* --- Crosshair tick used inline (e.g. as a list marker) -------------------- */ .theme-blueprint .tick { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%230c9f99' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 9px 9px; background-repeat: no-repeat; } /* On small screens drop the inset reticles a touch closer so they don't crowd. */ @media (max-width: 560px) { .theme-blueprint .anno--tr, .theme-blueprint .anno--tl { font-size: .55rem; } }