/* ========================================================================= I-Host — design tokens ========================================================================= The single source of truth for colour, type, spacing and elevation. Nothing else in the theme should hardcode a hex value or a pixel font size; if you find yourself wanting to, add a token here instead. Colour values are SAMPLED FROM THE REAL LOGO RASTER (templates/ihost/img/ihost-logo.png) - exact pixel values, not eyeballed: decoded the PNG's raw IDAT stream (zlib inflate + PNG filter reversal, no image library available in this environment) and counted every opaque pixel's colour. --ih-blue-600 and --ih-gray-500 are the two highest-frequency opaque colours in that histogram (#004C98 at 7342px, #818286 at 15772px, out of 451x138) - see IHOST_THEME_PLAN.md section 1.22 for the full method and numbers. ========================================================================= */ :root { /* ---- Brand --------------------------------------------------------- Blue and gray ARE the logo - nothing else. There used to be a cyan accent reserved for "click here"; removed on request (IHOST_THEME_ PLAN.md section 1.23) so nothing on the page uses a hue the logo doesn't have. The accent role it played is now split by background: on LIGHT surfaces, --ih-blue-600/700 (the logo blue) is the "click here" colour, same as it already was for links/text. On DARK surfaces (the hero, footer, any --ih-surface-dark section) plain blue-600 doesn't read as an accent - it's too close in hue/value to the navy it would sit on - so --ih-blue-100/200 (light tints of the SAME blue, not a second hue) carry that role instead. Every pairing below was contrast-checked against the actual dark backgrounds it lands on (blue-900 #062A57, blue-950 #041C3B), not assumed: blue-200 measures 8.25:1 / 9.87:1 against them. Gray stays a neutral and is never a button. */ --ih-blue-50: #EEF5FD; --ih-blue-100: #D6E6F8; /* accent on DARK surfaces (lighter step) */ --ih-blue-200: #A9C8EE; /* accent on DARK surfaces (primary) */ --ih-blue-400: #2E74C4; /* decorative glow tint only - see .ih-hero, .ih-cta */ --ih-blue-600: #004C98; /* primary — the logo blue, pixel-sampled; accent on LIGHT surfaces */ --ih-blue-700: #083D80; /* hover / pressed, on light surfaces */ --ih-blue-900: #062A57; /* deep navy — dark sections, footer */ --ih-blue-950: #041C3B; /* ---- Neutrals ------------------------------------------------------ */ --ih-white: #FFFFFF; --ih-gray-25: #FBFCFD; --ih-gray-50: #F5F7FA; --ih-gray-100: #EDF0F5; --ih-gray-200: #DFE4EC; --ih-gray-300: #C7CEDA; --ih-gray-400: #9AA4B5; --ih-gray-500: #818286; /* the logo's secondary gray, pixel-sampled */ --ih-gray-600: #5D6674; --ih-gray-700: #414A59; --ih-gray-800: #2A323E; --ih-gray-900: #171C24; /* ---- Semantic ------------------------------------------------------ Used by the VPS control panel for instance state, so these must stay distinguishable from the brand blue. */ --ih-success: #16A34A; --ih-success-bg:#E8F7EE; --ih-warning: #D97706; --ih-warning-bg:#FDF3E3; --ih-danger: #DC2626; --ih-danger-bg: #FDECEC; --ih-info: var(--ih-blue-600); --ih-info-bg: var(--ih-blue-50); /* Text-safe variants of the three above. Verified by computing real WCAG contrast ratios (relative-luminance formula, not eyeballed): --ih-success/warning/danger all fail 4.5:1 AA as TEXT, on white (3.30 / 3.19 / 4.83) and worse on their own -bg tint (2.98 / 2.90 / 4.23) - they were only ever fine as borders/icon fills/accent stripes, where the weaker 3:1 non-text threshold applies. Used wherever one of the three is genuinely rendered as text (status badges, .label-*, alerts) - never swapped in for border-color or decorative icon uses, which keep the brighter original. */ --ih-success-text: #166534; /* 6.44:1 on --ih-success-bg */ --ih-warning-text: #92400E; /* 6.45:1 on --ih-warning-bg */ --ih-danger-text: #B91C1C; /* 5.66:1 on --ih-danger-bg */ /* ---- Applied roles ------------------------------------------------- Components reference these, not the raw scale, so a rebrand is a handful of edits rather than a find-and-replace. */ --ih-text: var(--ih-gray-900); --ih-text-muted: var(--ih-gray-600); /* NOT var(--ih-gray-500) - that token is the logo's actual sampled gray (see its own definition above) and stays untouched so that documentation remains true. --ih-gray-500 on white is 3.84:1, failing AA for the real body-sized text this backs (savings copy, scroll hints, the checkout trust line) - this is a separate, purpose-built value computed to clear 4.5:1 (4.93). */ --ih-text-subtle: #6B7178; --ih-text-on-dark: #E8EEF7; --ih-text-on-dark-mut:#9FB3D0; --ih-border: var(--ih-gray-200); --ih-border-strong: var(--ih-gray-300); --ih-surface: var(--ih-white); --ih-surface-sunken: var(--ih-gray-50); --ih-surface-dark: var(--ih-blue-900); /* ---- Typography ---------------------------------------------------- NOTE: the plan calls for self-hosted Plus Jakarta Sans / Inter (section 3.2). Those files are not in the repo, and pulling them from a CDN would add a third-party request on every page load — the exact thing the plan rules out for a host serving EU customers. Until the WOFF2 files are added, this falls back to the platform UI stack, which ships real 600/700 weights everywhere and costs zero network requests. TO SWAP IN THE REAL FACES: drop the WOFF2 files in templates/ihost/fonts/, add the @font-face blocks, and change the two variables below. Nothing else in the theme needs to change. */ --ih-font-display: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ih-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ih-font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale — 1.25 major third, clamped so it breathes on desktop without overflowing a 360px phone. */ --ih-text-xs: 0.75rem; --ih-text-sm: 0.875rem; --ih-text-base: 1rem; --ih-text-lg: 1.125rem; --ih-text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); --ih-text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); --ih-text-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); --ih-text-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); --ih-leading-tight: 1.15; --ih-leading-snug: 1.35; --ih-leading-normal:1.6; /* Heavy display weights need negative tracking or they look loose. */ --ih-tracking-tight: -0.022em; --ih-tracking-wide: 0.08em; /* ---- Space — 4px base --------------------------------------------- */ --ih-space-1: 0.25rem; --ih-space-2: 0.5rem; --ih-space-3: 0.75rem; --ih-space-4: 1rem; --ih-space-5: 1.25rem; --ih-space-6: 1.5rem; --ih-space-8: 2rem; --ih-space-10:2.5rem; --ih-space-12:3rem; --ih-space-16:4rem; --ih-space-20:5rem; --ih-space-24:6rem; /* Vertical rhythm between landing sections. */ --ih-section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem); /* ---- Radius -------------------------------------------------------- */ --ih-radius-sm: 6px; --ih-radius: 10px; --ih-radius-lg: 14px; --ih-radius-xl: 20px; --ih-radius-pill: 999px; /* ---- Elevation ----------------------------------------------------- Deliberately soft. Hard drop shadows read as 2014. */ --ih-shadow-xs: 0 1px 2px rgba(6, 42, 87, 0.06); --ih-shadow-sm: 0 1px 3px rgba(6, 42, 87, 0.08), 0 1px 2px rgba(6, 42, 87, 0.04); --ih-shadow: 0 4px 12px rgba(6, 42, 87, 0.08), 0 1px 3px rgba(6, 42, 87, 0.05); --ih-shadow-lg: 0 12px 28px rgba(6, 42, 87, 0.12), 0 4px 10px rgba(6, 42, 87, 0.06); --ih-shadow-xl: 0 24px 48px rgba(6, 42, 87, 0.16), 0 8px 16px rgba(6, 42, 87, 0.07); --ih-ring: 0 0 0 3px rgba(0, 76, 152, 0.35); /* blue-600 */ /* ---- Motion --------------------------------------------------------- */ --ih-ease: cubic-bezier(0.4, 0, 0.2, 1); --ih-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ih-dur-fast: 120ms; --ih-dur: 200ms; --ih-dur-slow: 320ms; /* ---- Layout --------------------------------------------------------- */ --ih-container: 1200px; --ih-container-narrow: 820px; --ih-z-header: 1030; --ih-z-modal: 1050; } /* Respect the OS-level reduced-motion preference. A marketing page is never a good enough reason to make somebody nauseous. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }