/* ============================================================ oneCorp CI — v2.6 — paste-ready tokens & base utilities For Webflow: Project Settings → Custom Code → Head (or an Embed). Also load Satoshi (add to ): Binding values — do not alter hex, claim wording, or descriptor. ============================================================ */ :root { /* Core */ --deep-cove: #080A44; /* Primary — headlines, surfaces, table head, covers (dominates) */ --fun-blue: #1B4DB3; /* Secondary — links, icons, emphasis, "IT" in claim (carries) */ --orange: #EC612A; /* Accent — CTA, one key figure, warning (rare) */ --fond: #F7FAFF; /* Surface — info boxes, zebra rows, card fills */ --grau: #5B5A5A; /* Muted text, footers */ --linie: #E8E8E8; /* Table lines, dividers */ /* Tints */ --fun-blue-80: #4970C2; --fun-blue-20: #D1DBF0; --deep-cove-light: #A4B8E1; /* the only non-white text allowed on Deep Cove */ /* Status — traffic light only */ --status-green: #1E8E3E; --status-orange: #EC612A; --status-red: #D93025; /* Web-only supplements (digital, if needed) */ --web-blue: #424BD1; --midnight-blue: #282943; --dark-slate-blue: #414370; --grey-1: #EBEBEB; --grey-2: #E8E8E8; --grey-3: #C6C6C6; --grey-4: #5B5A5A; /* Type */ --font-sans: 'Satoshi','Segoe UI',Arial,sans-serif; /* Radius */ --radius-card: 16px; --radius-cta: 9px; --radius-chip: 10px; /* Shadow — highlight only; body UI stays flat */ --shadow-fun: 0 10px 34px rgba(27,77,179,.14); --shadow-cove: 0 12px 34px rgba(8,10,68,.22); /* Layout rhythm */ --container: 1320px; --gap-1: 24px; --gap-2: 48px; } /* Base */ body { font-family: var(--font-sans); color: var(--midnight-blue); } a { color: var(--fun-blue); text-decoration: none; } a:hover { color: var(--deep-cove); } /* Headlines — Medium 500 */ .oc-h1 { font-weight: 500; color: var(--deep-cove); letter-spacing: -.02em; line-height: 1; font-size: clamp(46px, 8.4vw, 108px); } .oc-h1--caps { text-transform: uppercase; letter-spacing: .08em; } .oc-h2 { font-weight: 500; color: var(--deep-cove); letter-spacing: -.02em; line-height: 1.04; font-size: clamp(30px, 4.4vw, 50px); } .oc-h3 { font-weight: 600; color: var(--deep-cove); font-size: clamp(19px, 2.4vw, 24px); } .oc-body { font-weight: 400; color: var(--midnight-blue); font-size: 16px; line-height: 1.65; text-wrap: pretty; } .oc-caption { font-size: 13px; color: var(--grau); letter-spacing: .04em; } .oc-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fun-blue); } /* The "IT" device — always Fun Blue */ .oc-it { color: var(--fun-blue); } /* Bullet — small Fun-Blue square (cube reference), never a disc */ .oc-bullet { display: inline-block; width: 9px; height: 9px; background: var(--fun-blue); flex: 0 0 auto; } /* CTA button — the main place Orange appears */ .oc-btn { display: inline-block; background: var(--orange); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: var(--radius-cta); border: 0; cursor: pointer; } .oc-btn:hover { filter: brightness(.96); color: #fff; } /* Cards */ .oc-card { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-card); padding: 28px; } .oc-card--fond { background: var(--fond); } .oc-card--highlight { border: 1.5px solid var(--fun-blue); box-shadow: var(--shadow-fun); } .oc-card--cove { background: var(--deep-cove); border-color: var(--deep-cove); color: #fff; box-shadow: var(--shadow-cove); } .oc-card--cove .oc-h3 { color: #fff; } /* Container */ .oc-container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(24px, 5vw, 48px); } .oc-section { padding: clamp(72px, 9vw, 120px) 0; } /* Table — head Deep Cove/white, zebra Fond, lines Linie */ .oc-table { width: 100%; border-collapse: collapse; } .oc-table thead th { background: var(--deep-cove); color: #fff; font-weight: 600; font-size: 13px; padding: 15px 20px; text-align: left; } .oc-table tbody td { font-size: 15px; color: var(--midnight-blue); padding: 14px 20px; border-bottom: 1px solid var(--linie); } .oc-table tbody tr:nth-child(even) { background: var(--fond); } .oc-table .oc-check { color: var(--fun-blue); font-weight: 700; text-align: center; } /* Icon chip — line icon in a soft Fun-Blue circle */ .oc-icon-chip { width: 54px; height: 54px; border-radius: 50%; background: var(--fun-blue-20); display: inline-flex; align-items: center; justify-content: center; } .oc-icon-chip svg { stroke: var(--fun-blue); fill: none; stroke-width: 1.6; } /* Surfaces */ .oc-on-cove { background: var(--deep-cove); color: #fff; } .oc-on-cove .oc-muted { color: var(--deep-cove-light); } /* Do NOT: accent bars under headings, beige/cream, centered body text, emojis. */