/* Start custom CSS *//* ========================================================================= ORCANNUS — GLOBAL DESIGN SYSTEM Paste this whole file into: Elementor → Site Settings → Custom CSS (or WPCode → Add Snippet → CSS Snippet, set to run "Site Wide Frontend") ========================================================================= */ :root{ /* --- Core palette, pulled from the logo mark --- */ --orc-navy: #0a0e1a; /* near-black, used for dark sections + wordmark ink */ --orc-navy-2: #10182c; /* slightly lifted navy, for cards on dark bg */ --orc-paper: #f7f8fa; /* the logo's off-white background */ --orc-paper-2: #eef0f4; /* subtle panel tint on light bg */ --orc-blue-deep: #141f6b; /* base of the logo's blue gradient */ --orc-blue: #2f5bff; /* mid gradient stop, primary accent */ --orc-blue-bright: #5b8dff; /* top gradient stop, hover/active */ --orc-steel-1: #9aa3ad; /* blade shadow */ --orc-steel-2: #d7dbe1; /* blade highlight */ --orc-ink: #101522; /* body text on light backgrounds */ --orc-ink-soft: #4a5164; /* secondary text on light backgrounds */ --orc-white: #ffffff; --orc-line: rgba(16,21,34,0.12); /* hairline rule on light bg */ --orc-line-dark: rgba(255,255,255,0.14); /* hairline rule on dark bg */ /* --- Type --- */ --orc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --orc-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif; --orc-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* --- Rhythm --- */ --orc-radius: 2px; /* deliberately near-square — this brand is not a rounded-card SaaS kit */ --orc-gutter: clamp(24px, 5vw, 72px); --orc-section-y: clamp(64px, 9vw, 128px); --orc-max: 1180px; } /* Fonts: add these to your theme's (Elementor → Custom Code → Head) or self-host via Elementor Custom Fonts if you prefer no external request. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ---------- Resets scoped to Orcannus content only ---------- */ .orc{ font-family: var(--orc-font-body); color: var(--orc-ink); -webkit-font-smoothing: antialiased; } .orc *{ box-sizing: border-box; } .orc a{ color: inherit; text-decoration: none; } .orc img{ max-width: 100%; display: block; } /* ---------- Section shells ---------- */ .orc-section{ padding: var(--orc-section-y) var(--orc-gutter); } .orc-section--light{ background: var(--orc-paper); color: var(--orc-ink); } .orc-section--dark{ background: var(--orc-navy); color: var(--orc-white); } .orc-section--tint{ background: var(--orc-paper-2); color: var(--orc-ink); } .orc-wrap{ max-width: var(--orc-max); margin: 0 auto; } /* ---------- Type scale ---------- */ .orc-eyebrow{ font-family: var(--orc-font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--orc-blue); } .orc-section--dark .orc-eyebrow{ color: var(--orc-blue-bright); } .orc-h1{ font-family: var(--orc-font-display); font-weight: 500; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 20px; max-width: 18ch; } .orc-h2{ font-family: var(--orc-font-display); font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; margin: 0 0 16px; max-width: 22ch; } .orc-h3{ font-family: var(--orc-font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; margin: 0 0 10px; } .orc-lede{ font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--orc-ink-soft); max-width: 62ch; margin: 0 0 28px; } .orc-section--dark .orc-lede{ color: rgba(255,255,255,0.72); } .orc-body{ font-size: 16px; line-height: 1.65; color: var(--orc-ink-soft); max-width: 62ch; } .orc-section--dark .orc-body{ color: rgba(255,255,255,0.72); } /* ---------- Buttons ---------- */ .orc-btn{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--orc-font-body); font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: var(--orc-radius); border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .orc-btn--primary{ background: linear-gradient(135deg, var(--orc-blue-deep), var(--orc-blue)); color: var(--orc-white); } .orc-btn--primary:hover{ background: linear-gradient(135deg, var(--orc-blue), var(--orc-blue-bright)); } .orc-btn--ghost{ background: transparent; border-color: var(--orc-line); color: var(--orc-ink); } .orc-section--dark .orc-btn--ghost{ border-color: var(--orc-line-dark); color: var(--orc-white); } .orc-btn--ghost:hover{ border-color: var(--orc-blue); color: var(--orc-blue); } /* ---------- Grid helpers ---------- */ .orc-grid{ display: grid; gap: 40px; } .orc-grid--2{ grid-template-columns: repeat(2, 1fr); } .orc-grid--3{ grid-template-columns: repeat(3, 1fr); } .orc-grid--4{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px){ .orc-grid--2, .orc-grid--3, .orc-grid--4{ grid-template-columns: 1fr; } } /* ---------- Rule-based list (replaces generic rounded-card kit) ---------- */ .orc-rule-list{ border-top: 1px solid var(--orc-line); } .orc-section--dark .orc-rule-list{ border-top-color: var(--orc-line-dark); } .orc-rule-item{ display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--orc-line); } .orc-section--dark .orc-rule-item{ border-bottom-color: var(--orc-line-dark); } .orc-rule-item__index{ font-family: var(--orc-font-mono); font-size: 13px; color: var(--orc-blue); padding-top: 4px; } @media (max-width: 700px){ .orc-rule-item{ grid-template-columns: 1fr; gap: 8px; } } /* ---------- Stat strip (mono type used for real data, not decoration) ---------- */ .orc-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--orc-line-dark); padding-top: 40px; margin-top: 40px; } .orc-stat__value{ font-family: var(--orc-font-mono); font-size: clamp(28px, 3vw, 40px); color: var(--orc-blue-bright); } .orc-stat__label{ font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 6px; } @media (max-width: 700px){ .orc-stats{ grid-template-columns: 1fr 1fr; } } /* ---------- Header ---------- */ .orc-header{ position: sticky; top: 0; z-index: 999; background: rgba(10,14,26,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--orc-line-dark); } .orc-header__inner{ max-width: var(--orc-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--orc-gutter); } .orc-header__logo img{ height: 40px; width: auto; } .orc-nav{ display: flex; align-items: center; gap: 32px; } .orc-nav a{ font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.82); } .orc-nav a:hover{ color: var(--orc-blue-bright); } .orc-nav__toggle{ display: none; background: none; border: none; color: var(--orc-white); font-size: 24px; cursor: pointer; } @media (max-width: 860px){ .orc-nav{ position: fixed; inset: 64px 0 0 0; background: var(--orc-navy); flex-direction: column; justify-content: flex-start; padding: 32px var(--orc-gutter); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: 0.18s ease; } .orc-nav.is-open{ opacity: 1; pointer-events: auto; transform: translateY(0); } .orc-nav__toggle{ display: block; } } /* ---------- Footer ---------- */ .orc-footer{ background: var(--orc-navy); color: rgba(255,255,255,0.6); padding: 56px var(--orc-gutter) 28px; } .orc-footer__top{ max-width: var(--orc-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--orc-line-dark); } .orc-footer__logo img{ height: 34px; margin-bottom: 14px; } .orc-footer h4{ font-family: var(--orc-font-mono); font-size: 13px; color: rgba(255,255,255,0.85); margin: 0 0 14px; font-weight: 400; } .orc-footer a{ display: block; font-size: 14.5px; color: rgba(255,255,255,0.6); margin-bottom: 10px; } .orc-footer a:hover{ color: var(--orc-blue-bright); } .orc-footer__bottom{ max-width: var(--orc-max); margin: 0 auto; padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 12px; } @media (max-width: 800px){ .orc-footer__top{ grid-template-columns: 1fr; } } /* ---------- Contact form (native Elementor Form widget) ---------- */ .orc .elementor-field-group input, .orc .elementor-field-group textarea{ border-radius: var(--orc-radius) !important; border: 1px solid var(--orc-line) !important; font-family: var(--orc-font-body) !important; } .orc .elementor-button{ border-radius: var(--orc-radius) !important; background: linear-gradient(135deg, var(--orc-blue-deep), var(--orc-blue)) !important; }/* End custom CSS */