/* ── CIRCL brand foundation ───────────────────────────────────────────── Single source of truth for brand tokens + the self-hosted brand typeface. Loaded by every head (portals, funnel, marketing, auth, error pages) via versioned_asset('brand/circl.css'). Page-specific layers (assets/css/custom.css for the portals, steps/css/questionnaire.css for the funnel, assets/style.css for the legacy landing page) build on these variables — don't hardcode brand colours elsewhere. Palette + type spec: CIRCL Brand Guide (pp. 25–26). */ @font-face { font-family: 'Zalando Sans SemiExpanded'; src: url('fonts/ZalandoSansSemiExpanded-wght.ttf') format('truetype-variations'), url('fonts/ZalandoSansSemiExpanded-wght.ttf') format('truetype'); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Zalando Sans SemiExpanded'; src: url('fonts/ZalandoSansSemiExpanded-Italic-wght.ttf') format('truetype-variations'), url('fonts/ZalandoSansSemiExpanded-Italic-wght.ttf') format('truetype'); font-weight: 200 900; font-style: italic; font-display: swap; } :root { /* Palette */ --circl-black: #0b131e; /* primary ink, primary CTA */ --circl-black-deep: #081417; /* dark surfaces */ --circl-burgundy: #371815; /* dark-gradient end, hover on black */ --circl-light-blue: #e4f0f6; /* soft accent surface */ --circl-grey: #f1f2f0; /* page ground */ --circl-light-grey: #f7f7f7; /* alt surface */ --circl-white: #ffffff; --circl-lemon: #fffcab; /* energy accent, secondary CTA */ /* Derived */ --circl-ink: var(--circl-black); --circl-ink-muted: #4b5563; --circl-ink-subtle: #6b7280; --circl-line: #dfe3e6; --circl-black-hover: #1e2a36; --circl-lemon-hover: #fff58a; --circl-light-blue-hover: #d3e6f0; --circl-danger: #b42318; --circl-success: #1f7a4d; /* Gradients (brand guide "light" / "dark" gradients) */ --circl-gradient-light: linear-gradient(160deg, #e4f0f6 0%, #f1f2f0 100%); --circl-gradient-dark: linear-gradient(135deg, #0b131e 0%, #0b131e 55%, #371815 100%); /* Type */ --circl-font: 'Zalando Sans SemiExpanded', 'Helvetica Neue', Arial, sans-serif; --circl-tracking-tight: -0.02em; /* headlines/body: tracking -30 */ --circl-tracking-caps: 0.1em; /* uppercase descriptors: tracking 100 */ /* Shape */ --circl-radius-card: 16px; --circl-radius-input: 10px; --circl-radius-pill: 999px; --circl-shadow-card: 0 1px 2px rgba(11, 19, 30, .04), 0 8px 24px rgba(11, 19, 30, .06); } /* Utility classes shared by the hand-written pages (funnel, auth, marketing). */ .circl-font { font-family: var(--circl-font) !important; } .circl-eyebrow { font-family: var(--circl-font); font-weight: 600; font-size: 12px; letter-spacing: var(--circl-tracking-caps); text-transform: uppercase; color: var(--circl-ink-muted); } .circl-headline { font-family: var(--circl-font); font-weight: 500; letter-spacing: var(--circl-tracking-tight); line-height: 1.05; color: var(--circl-ink); } .circl-btn, .circl-btn-secondary, .circl-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--circl-font); font-weight: 600; font-size: 15px; letter-spacing: var(--circl-tracking-tight); line-height: 1; padding: 14px 26px; border-radius: var(--circl-radius-pill); border: 2px solid transparent; text-decoration: none !important; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; } .circl-btn { background: var(--circl-black); color: var(--circl-white) !important; border-color: var(--circl-black); } .circl-btn:hover, .circl-btn:focus { background: var(--circl-black-hover); border-color: var(--circl-black-hover); color: var(--circl-white) !important; } .circl-btn-secondary { background: var(--circl-lemon); color: var(--circl-black) !important; border-color: var(--circl-lemon); } .circl-btn-secondary:hover, .circl-btn-secondary:focus { background: var(--circl-lemon-hover); border-color: var(--circl-lemon-hover); } .circl-btn-outline { background: transparent; color: var(--circl-black) !important; border-color: var(--circl-black); } .circl-btn-outline:hover, .circl-btn-outline:focus { background: var(--circl-black); color: var(--circl-white) !important; } .circl-btn-outline.on-dark { color: var(--circl-white) !important; border-color: var(--circl-white); } .circl-btn-outline.on-dark:hover { background: var(--circl-white); color: var(--circl-black) !important; } /* The brand's "+" bubble that sits at the end of a primary CTA pill */ .circl-btn .plus { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -6px -12px -6px 4px; border-radius: 50%; background: var(--circl-white); color: var(--circl-black); font-weight: 500; font-size: 16px; line-height: 1; } .circl-card { background: var(--circl-white); border-radius: var(--circl-radius-card); box-shadow: var(--circl-shadow-card); } .circl-surface-dark { background: var(--circl-gradient-dark); color: var(--circl-white); } .circl-surface-light { background: var(--circl-gradient-light); } /* Logo super-graphic: the mark as a faint, oversized background element */ .circl-supergraphic { position: relative; overflow: hidden; isolation: isolate; } .circl-supergraphic::before { content: ''; position: absolute; right: -12%; top: -20%; width: 70%; aspect-ratio: 242.79 / 236.84; background: url('logo/circl-mark-black.svg') no-repeat center / contain; opacity: .05; pointer-events: none; z-index: -1; } .circl-surface-dark.circl-supergraphic::before { background-image: url('logo/circl-mark-white.svg'); } /* ── Funnel header lockup ─────────────────────────────────────────────── .higeia-logo is a flex item (the step header is d-flex) and its is .img-fluid, sized only by width/height attributes under a max-height. Chrome resolves that combination to 0px inside a shrink-to-fit flex item, so the logo vanished. The retired "Formerly Higeia" ::after used to prop the wrapper open by accident, and sized the logo to the text (81px) rather than the header's 24px. Give the image its height outright; width follows the SVG's ratio. */ .higeia-logo img { height: 24px; width: auto; max-width: none; }