/** * Design tokens * * Single source of truth for colour, type and spacing. Every other stylesheet * references these variables rather than literal values, so a rebrand is a * change to this file alone. * * Direction: the structural language of the competitive set (SanDisk, * Western Digital, DataLocker, Apricorn) with the iStorage blue retained. * * Three of those four lead with red on navy or near-black. Keeping blue is a * deliberate differentiator; everything else here follows the category * convention: grotesque type with tight tracking, a near-black structural * ground, generous whitespace, near-square corners and a flat, technical * surface treatment with minimal shadow. * * PROVISIONAL until official brand guidelines are supplied. The blues were * sampled from the current istorage-uk.com stylesheet, which uses four * near-identical values (#0171b9, #0471b9, #006cb0, #2989d8); they are * consolidated to one here. */ :root { /* --- Brand ------------------------------------------------------- */ --c-brand: #0171b9; --c-brand-dark: #015a94; --c-brand-darker: #013f68; --c-brand-light: #3b96d0; --c-brand-tint: #e8f2f9; /* One step darker than the tint, for a highlighted cell on an already striped table row. */ --c-brand-tint-dark: #dcebf6; --c-accent: #23b6de; --c-accent-dark: #1a93b4; /* Secondary brand colour, used on the cloudAshur product family. */ --c-secondary: #520161; --c-secondary-light: #7a2a8a; /* --- Neutrals ---------------------------------------------------- */ /* Near-black structural ground, in the register SanDisk and Western Digital use for navigation and footers. Cooler and darker than a plain grey so it reads as deliberate rather than washed out. */ --c-black: #0b0e13; --c-grey-900: #111827; --c-grey-800: #1f2937; --c-grey-700: #374151; --c-grey-600: #4b5563; --c-grey-500: #6b7280; --c-grey-400: #9ca3af; --c-grey-300: #d1d5db; --c-grey-200: #e5e7eb; --c-grey-100: #f3f4f6; --c-grey-50: #f9fafb; --c-white: #ffffff; /* --- Semantic ---------------------------------------------------- */ --c-success: #15803d; --c-warning: #a16207; --c-error: #b91c1c; --c-info: var(--c-brand); /* --- Applied ----------------------------------------------------- */ --c-text: var(--c-grey-800); --c-text-muted: var(--c-grey-600); --c-text-inverse: var(--c-white); --c-heading: var(--c-grey-900); --c-link: var(--c-brand); --c-link-hover: var(--c-brand-dark); --c-border: var(--c-grey-200); --c-border-strong: var(--c-grey-300); --c-bg: var(--c-white); --c-bg-subtle: var(--c-grey-50); --c-bg-muted: var(--c-grey-100); --c-bg-inverse: var(--c-grey-900); /* Focus ring. * * Two-tone, because no single colour clears 3:1 against every surface * this theme uses. Amber alone scores 1.64:1 on white, which fails * WCAG 2.2 AA (1.4.11 Non-text Contrast); near-black alone disappears * on the dark hero and footer. * * Pairing them means one of the two always contrasts: a dark inner ring * sits against light grounds, the amber outer ring against dark ones. * Same principle as the GOV.UK focus style. */ --c-focus: #ffbf47; --c-focus-inner: #0b0e13; --focus-ring: 3px solid var(--c-focus); --focus-offset: 2px; /* Overlays used over hero and banner imagery. The competitive set runs these dark and fairly heavy so headline copy stays legible over product photography. */ --c-overlay: rgba(11, 14, 19, 0.62); --c-overlay-strong: rgba(11, 14, 19, 0.78); /* --- Typography -------------------------------------------------- */ /* Grotesque pairing. Archivo carries the tight, slightly condensed character of FK Grotesk Neue, which SanDisk and Western Digital use. */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid scale. Headline sizes step up noticeably at desktop, which is what gives the category its confident, poster-like hero. */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.0625rem; /* 17px */ --fs-lg: clamp(1.25rem, 0.4vw + 1.15rem, 1.5rem); --fs-xl: clamp(1.5rem, 1vw + 1.25rem, 2rem); --fs-2xl: clamp(1.875rem, 2vw + 1.4rem, 2.75rem); --fs-3xl: clamp(2.25rem, 3.4vw + 1.4rem, 4rem); --fs-4xl: clamp(2.5rem, 4.6vw + 1.4rem, 5rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.08; --lh-snug: 1.25; --lh-base: 1.6; --lh-loose: 1.75; /* Negative tracking on large grotesque headings is the signature of this category. Without it Archivo reads loose and generic at display sizes. */ --ls-display: -0.03em; --ls-heading: -0.02em; --ls-base: 0; --ls-caps: 0.08em; /* --- Spacing ----------------------------------------------------- */ --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2rem; --sp-xl: 3rem; --sp-2xl: 4.5rem; --sp-3xl: 7rem; /* Section rhythm. Noticeably more generous than the previous build: the competitor set all run large vertical gaps between sections. */ --section-padding: clamp(3rem, 7vw, 7rem); --section-padding-sm: clamp(2.5rem, 5vw, 4.5rem); /* --- Layout ------------------------------------------------------ */ --container-max: 1280px; --container-wide: 1480px; --container-narrow: 760px; --container-gutter: clamp(1rem, 4vw, 2.5rem); /* --- Borders and shadows ----------------------------------------- */ /* Near-square. The category reads as engineered hardware, not consumer software, and heavy rounding undercuts that. */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* Flat by default. Elevation is carried by borders and ground colour, with shadow reserved for genuinely floating surfaces. */ --shadow-sm: 0 1px 2px rgba(11, 14, 19, 0.06); --shadow-md: 0 4px 12px rgba(11, 14, 19, 0.08); --shadow-lg: 0 12px 32px rgba(11, 14, 19, 0.12); /* --- Motion ------------------------------------------------------ */ --ease: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* --- Z-index scale ----------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-drawer: 400; --z-skiplink: 500; } /** * Alternate palette: red on navy. * * The category convention, for reference and for a quick comparison without * rewriting the theme. Add data-palette="category" to to switch. * Not active by default: iStorage blue is the agreed primary. */ :root[data-palette="category"] { --c-brand: #d0021b; --c-brand-dark: #a80216; --c-brand-darker: #7d0110; --c-brand-light: #e5405a; --c-brand-tint: #fdecee; --c-accent: #ff7012; --c-accent-dark: #d85a06; --c-grey-900: #17214a; --c-bg-inverse: #17214a; } /** * Honour the operating system's reduced motion setting everywhere. * WCAG 2.2 AA, 2.3.3 Animation from Interactions. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }