/* ========================================================================== DigitalProfile.lk — Design Tokens The single source of truth for colour, type, space, radius, shadow, motion. Nothing else in the stylesheet set should contain a raw colour or size. Layer 1 PRIMITIVES — raw palette + scales. Never used directly in UI code. Layer 2 SEMANTIC — meaning-based aliases. Use these everywhere. ========================================================================== */ /* -------------------------------------------------------------------------- LAYER 1 — PRIMITIVES -------------------------------------------------------------------------- */ :root { /* Brand blue — primary accent, taken from the logo mark */ --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; /* Primary Brand Accent */ --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-900: #1e3a8a; /* Brand violet — secondary accent, used only for depth + glow gradients */ --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; /* Deep Violet */ /* Slate — the neutral ramp for both themes */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #080f1f; --white: #ffffff; --black: #000000; /* Support colours — status only, never decoration */ --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --red-300: #fca5a5; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; /* Channel colours for third-party marks */ --whatsapp-500: #25d366; --whatsapp-600: #1da851; /* Raw RGB triplets, so tokens can build translucent layers */ --rgb-slate-900: 15 23 42; --rgb-slate-50: 248 250 252; --rgb-blue-500: 59 130 246; --rgb-violet-600: 124 58 237; --rgb-white: 255 255 255; --rgb-red-500: 239 68 68; --rgb-green-500: 34 197 94; --rgb-amber-500: 245 158 11; /* ---- Typography scale ---------------------------------------------- */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.0625rem; /* 17px */ --text-xl: 1.1875rem; /* 19px */ /* Fluid display sizes — min at 360px viewport, max at 1280px */ --text-h5: clamp(1.0625rem, 0.99rem + 0.33vw, 1.25rem); --text-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); --text-h3: clamp(1.5rem, 1.33rem + 0.76vw, 2rem); --text-h2: clamp(1.875rem, 1.53rem + 1.52vw, 2.9rem); --text-h1: clamp(2.25rem, 1.375rem + 3.125vw, 3.9rem); --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Large Inter headlines need negative tracking to stay optically tight */ --tracking-tighter: -0.035em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.1em; /* ---- Space scale (4px base) ----------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Vertical rhythm between full page sections */ --space-section: clamp(4.5rem, 3.2rem + 5.5vw, 8rem); --space-section-sm: clamp(3rem, 2.3rem + 3vw, 5rem); /* ---- Layout --------------------------------------------------------- */ --container-max: 1200px; --container-narrow: 760px; --container-wide: 1400px; --gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); --header-height: 68px; /* ---- Radii ---------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 28px; --radius-full: 999px; /* ---- Motion --------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 140ms; --duration-base: 240ms; --duration-slow: 420ms; --duration-slower: 720ms; /* ---- Elevation (z-index) -------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; } /* -------------------------------------------------------------------------- LAYER 2 — SEMANTIC TOKENS : LIGHT THEME (default) -------------------------------------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; /* Surfaces */ --color-bg: var(--slate-50); --color-bg-sunken: var(--slate-100); --color-bg-inverse: var(--slate-900); --color-surface: var(--white); --color-surface-raised: var(--white); --color-surface-muted: var(--slate-100); --color-surface-translucent: rgb(var(--rgb-white) / 0.72); /* Text */ --color-text: var(--slate-900); --color-text-muted: var(--slate-600); --color-text-subtle: var(--slate-500); --color-text-inverse: var(--slate-50); --color-text-on-accent: var(--white); /* Lines */ --color-border: rgb(var(--rgb-slate-900) / 0.09); --color-border-strong: rgb(var(--rgb-slate-900) / 0.16); --color-border-accent: rgb(var(--rgb-blue-500) / 0.35); /* Accent */ --color-accent: var(--blue-500); --color-accent-hover: var(--blue-600); --color-accent-active: var(--blue-700); --color-accent-text: var(--blue-600); /* AA on light surfaces */ --color-accent-soft: var(--blue-50); --color-accent-soft-border: var(--blue-200); --color-accent-secondary: var(--violet-600); /* Status */ --color-success: var(--green-600); --color-success-text: var(--green-700); /* AA on light surfaces */ --color-success-soft: #dcfce7; --color-danger: var(--red-600); --color-danger-text: var(--red-700); /* AA on light surfaces */ --color-danger-soft: #fef2f2; --color-danger-border: rgb(var(--rgb-red-500) / 0.38); /* Fields */ --color-field: var(--white); --color-field-border: var(--slate-300); /* Gradients — the 3D / glow aesthetic */ --gradient-accent: linear-gradient(135deg, var(--blue-500) 0%, var(--violet-600) 100%); --gradient-accent-soft: linear-gradient(135deg, rgb(var(--rgb-blue-500) / 0.14) 0%, rgb(var(--rgb-violet-600) / 0.14) 100%); --gradient-button: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%); --gradient-button-hover: linear-gradient(180deg, var(--blue-600) 0%, var(--blue-700) 100%); --gradient-surface: linear-gradient(180deg, var(--white) 0%, var(--slate-50) 100%); --gradient-text: linear-gradient(120deg, var(--blue-600) 0%, var(--violet-600) 60%); --gradient-hairline: linear-gradient(90deg, transparent, var(--color-border-strong), transparent); --gradient-fade-edge: linear-gradient(90deg, var(--color-bg), transparent); /* Mesh blobs painted behind the page */ --mesh-blob-1: rgb(var(--rgb-blue-500) / 0.18); --mesh-blob-2: rgb(var(--rgb-violet-600) / 0.14); --mesh-blob-3: rgb(var(--rgb-blue-500) / 0.10); /* Shadows — soft, multi-layer, never harsh */ --shadow-xs: 0 1px 2px rgb(var(--rgb-slate-900) / 0.05); --shadow-sm: 0 1px 2px rgb(var(--rgb-slate-900) / 0.05), 0 2px 6px rgb(var(--rgb-slate-900) / 0.05); --shadow-md: 0 2px 4px rgb(var(--rgb-slate-900) / 0.04), 0 8px 20px -6px rgb(var(--rgb-slate-900) / 0.10); --shadow-lg: 0 4px 8px rgb(var(--rgb-slate-900) / 0.04), 0 18px 36px -12px rgb(var(--rgb-slate-900) / 0.14); --shadow-xl: 0 8px 16px rgb(var(--rgb-slate-900) / 0.05), 0 32px 64px -20px rgb(var(--rgb-slate-900) / 0.20); --shadow-float: 0 12px 24px -8px rgb(var(--rgb-slate-900) / 0.12), 0 40px 80px -24px rgb(var(--rgb-slate-900) / 0.22); --shadow-accent: 0 8px 18px -6px rgb(var(--rgb-blue-500) / 0.45); --shadow-accent-lg: 0 14px 36px -10px rgb(var(--rgb-blue-500) / 0.50); --shadow-inset-top: inset 0 1px 0 rgb(var(--rgb-white) / 0.6); /* Ring used for :focus-visible */ --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent); } /* -------------------------------------------------------------------------- LAYER 2 — SEMANTIC TOKENS : DARK THEME -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --color-bg: var(--slate-900); --color-bg-sunken: var(--slate-950); --color-bg-inverse: var(--slate-50); --color-surface: var(--slate-800); --color-surface-raised: #243247; --color-surface-muted: #1a2639; --color-surface-translucent: rgb(15 23 42 / 0.72); --color-text: var(--slate-50); --color-text-muted: var(--slate-400); --color-text-subtle: #8296b0; --color-text-inverse: var(--slate-900); --color-text-on-accent: var(--white); --color-border: rgb(var(--rgb-slate-50) / 0.10); --color-border-strong: rgb(var(--rgb-slate-50) / 0.20); --color-border-accent: rgb(var(--rgb-blue-500) / 0.45); --color-accent: var(--blue-500); --color-accent-hover: var(--blue-400); --color-accent-active: var(--blue-300); --color-accent-text: var(--blue-400); /* AA on dark surfaces */ --color-accent-soft: rgb(var(--rgb-blue-500) / 0.16); --color-accent-soft-border: rgb(var(--rgb-blue-500) / 0.34); --color-accent-secondary: var(--violet-400); --color-success: var(--green-400); --color-success-text: var(--green-400); /* AA on dark surfaces */ --color-success-soft: rgb(34 197 94 / 0.18); --color-danger: var(--red-400); --color-danger-text: var(--red-300); /* AA on dark surfaces */ --color-danger-soft: rgb(var(--rgb-red-500) / 0.16); --color-danger-border: rgb(var(--rgb-red-500) / 0.42); --color-field: rgb(var(--rgb-slate-900) / 0.45); --color-field-border: rgb(var(--rgb-slate-50) / 0.18); --gradient-accent: linear-gradient(135deg, var(--blue-500) 0%, var(--violet-500) 100%); --gradient-accent-soft: linear-gradient(135deg, rgb(var(--rgb-blue-500) / 0.22) 0%, rgb(var(--rgb-violet-600) / 0.22) 100%); --gradient-button: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%); --gradient-button-hover: linear-gradient(180deg, var(--blue-400) 0%, var(--blue-500) 100%); --gradient-surface: linear-gradient(180deg, var(--slate-800) 0%, #18253a 100%); --gradient-text: linear-gradient(120deg, var(--blue-300) 0%, var(--violet-300) 65%); --gradient-hairline: linear-gradient(90deg, transparent, var(--color-border-strong), transparent); --gradient-fade-edge: linear-gradient(90deg, var(--color-bg), transparent); --mesh-blob-1: rgb(var(--rgb-blue-500) / 0.26); --mesh-blob-2: rgb(var(--rgb-violet-600) / 0.24); --mesh-blob-3: rgb(var(--rgb-blue-500) / 0.14); /* Dark surfaces read as "raised" through light rims plus deeper shadow */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.3); --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.5); --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 18px 36px -12px rgb(0 0 0 / 0.6); --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.35), 0 32px 64px -20px rgb(0 0 0 / 0.7); --shadow-float: 0 12px 24px -8px rgb(0 0 0 / 0.5), 0 40px 80px -24px rgb(0 0 0 / 0.75); --shadow-accent: 0 8px 18px -6px rgb(var(--rgb-blue-500) / 0.55); --shadow-accent-lg: 0 14px 40px -10px rgb(var(--rgb-blue-500) / 0.60); --shadow-inset-top: inset 0 1px 0 rgb(var(--rgb-white) / 0.07); --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent-hover); } /* -------------------------------------------------------------------------- INVERTED REGION A light-theme page can still contain a deliberately dark full-bleed band. Applying .theme-inverse re-points the semantic tokens so every component inside it keeps working without a single override. -------------------------------------------------------------------------- */ .theme-inverse { color-scheme: dark; --color-bg: var(--slate-900); --color-bg-sunken: var(--slate-950); --color-surface: var(--slate-800); --color-surface-raised: #243247; --color-surface-muted: #1a2639; --color-surface-translucent: rgb(15 23 42 / 0.6); --color-text: var(--slate-50); --color-text-muted: var(--slate-400); --color-text-subtle: #8296b0; --color-border: rgb(var(--rgb-slate-50) / 0.12); --color-border-strong: rgb(var(--rgb-slate-50) / 0.22); --color-accent-text: var(--blue-400); --color-accent-soft: rgb(var(--rgb-blue-500) / 0.16); --color-accent-soft-border: rgb(var(--rgb-blue-500) / 0.34); --color-success: var(--green-400); --color-danger: var(--red-400); --color-danger-text: var(--red-300); --color-danger-soft: rgb(var(--rgb-red-500) / 0.16); --color-danger-border: rgb(var(--rgb-red-500) / 0.42); --color-field: rgb(var(--rgb-slate-900) / 0.45); --color-field-border: rgb(var(--rgb-slate-50) / 0.18); --gradient-surface: linear-gradient(180deg, var(--slate-800) 0%, #18253a 100%); --gradient-text: linear-gradient(120deg, var(--blue-300) 0%, var(--violet-300) 65%); --mesh-blob-1: rgb(var(--rgb-blue-500) / 0.3); --mesh-blob-2: rgb(var(--rgb-violet-600) / 0.26); --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.5); --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 18px 36px -12px rgb(0 0 0 / 0.6); --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.35), 0 32px 64px -20px rgb(0 0 0 / 0.7); --shadow-float: 0 12px 24px -8px rgb(0 0 0 / 0.5), 0 40px 80px -24px rgb(0 0 0 / 0.75); --shadow-inset-top: inset 0 1px 0 rgb(var(--rgb-white) / 0.07); background-color: var(--color-bg); color: var(--color-text); } /* ========================================================================== LAYER 3 — LIVE BRAND ACCENT A profile owner picks their own accent colour, so the accent cannot be a fixed value. Everything accent-coloured is derived from ONE variable: --brand-accent Change that single value and the buttons, rings, glows, washes, borders and gradients all follow, in both themes, with no other edit. The accent stays the same colour in light and dark mode, exactly as the brand asks; only the amount of white or slate mixed into it changes, which is what keeps the text readable on each background. Set it at runtime with: document.documentElement.style.setProperty("--brand-accent", "#6d28d9"); It is declared last in this file so it also re-points the core accent aliases above, which is why focus rings and links follow the chosen colour too. ========================================================================== */ :root { --brand-accent: var(--blue-500); /* #3b82f6 Tech Blue — the default */ } /* ---- Derived in LIGHT mode ------------------------------------------------ Text-weight tints are pulled toward slate so they clear AA on a white card; fills stay at full strength so the colour still reads as the brand. -------------------------------------------------------------------------- */ :root, [data-theme="light"] { --color-accent: var(--brand-accent); --color-accent-hover: color-mix(in srgb, var(--brand-accent) 86%, var(--slate-900)); --color-accent-active: color-mix(in srgb, var(--brand-accent) 74%, var(--slate-900)); --color-accent-text: color-mix(in srgb, var(--brand-accent) 80%, var(--slate-900)); --color-accent-soft: color-mix(in srgb, var(--brand-accent) 9%, var(--white)); --color-accent-soft-border: color-mix(in srgb, var(--brand-accent) 26%, var(--white)); --color-border-accent: color-mix(in srgb, var(--brand-accent) 34%, transparent); --accent-wash: color-mix(in srgb, var(--brand-accent) 10%, transparent); --accent-line: color-mix(in srgb, var(--brand-accent) 30%, transparent); --accent-glow: color-mix(in srgb, var(--brand-accent) 36%, transparent); --accent-on: var(--white); /* A single-hue sheen: lighter top-left, deeper bottom-right */ --accent-gradient: linear-gradient( 140deg, color-mix(in srgb, var(--brand-accent) 82%, var(--white)) 0%, var(--brand-accent) 48%, color-mix(in srgb, var(--brand-accent) 78%, var(--slate-900)) 100% ); --accent-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand-accent) 55%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--brand-accent) 40%, transparent); --accent-shadow-lg: 0 16px 34px -12px color-mix(in srgb, var(--brand-accent) 60%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--brand-accent) 36%, transparent); } /* ---- Derived in DARK mode ------------------------------------------------- Same accent, mixed toward white instead, so it lifts off a slate card. -------------------------------------------------------------------------- */ [data-theme="dark"] { --color-accent: var(--brand-accent); --color-accent-hover: color-mix(in srgb, var(--brand-accent) 82%, var(--white)); --color-accent-active: color-mix(in srgb, var(--brand-accent) 66%, var(--white)); --color-accent-text: color-mix(in srgb, var(--brand-accent) 70%, var(--white)); --color-accent-soft: color-mix(in srgb, var(--brand-accent) 17%, transparent); --color-accent-soft-border: color-mix(in srgb, var(--brand-accent) 36%, transparent); --color-border-accent: color-mix(in srgb, var(--brand-accent) 44%, transparent); --accent-wash: color-mix(in srgb, var(--brand-accent) 16%, transparent); --accent-line: color-mix(in srgb, var(--brand-accent) 38%, transparent); --accent-glow: color-mix(in srgb, var(--brand-accent) 46%, transparent); --accent-on: var(--white); --accent-gradient: linear-gradient( 140deg, color-mix(in srgb, var(--brand-accent) 78%, var(--white)) 0%, var(--brand-accent) 50%, color-mix(in srgb, var(--brand-accent) 72%, var(--slate-900)) 100% ); --accent-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand-accent) 65%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--brand-accent) 45%, transparent); --accent-shadow-lg: 0 18px 40px -12px color-mix(in srgb, var(--brand-accent) 70%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--brand-accent) 40%, transparent); } /* ---- Profile layout tokens ------------------------------------------------ The profile is a phone-width column wherever it is viewed, so its own measurements live together rather than being scattered through the sheet. -------------------------------------------------------------------------- */ :root { --profile-width: 27rem; /* the card column on tablet and desktop */ --profile-gutter: 1.25rem; /* side padding inside the column */ --profile-cover-h: 9.5rem; --profile-avatar: 6.5rem; --profile-avatar-ring: 4px; --profile-radius: var(--radius-lg); --profile-frame-radius: var(--radius-3xl); } /* ---- Standard template layout tokens -------------------------------------- The Standard profile is a wide executive card the owner can preview at three widths, so the three widths and the card's own measurements are named once here instead of being repeated down the stylesheet. -------------------------------------------------------------------------- */ :root { --std-width: 60rem; /* desktop preview */ --std-width-tablet: 48rem; /* 768px */ --std-width-mobile: 23.4375rem; /* 375px */ --std-gutter: 1.5rem; --std-cover-h: 11rem; --std-avatar: 7rem; --std-avatar-ring: 4px; --std-radius: var(--radius-lg); } /* ---- Premium template layout tokens --------------------------------------- The Premium profile is a whole one-page site rather than a card, so its "desktop" preview is the full stage and only the tablet and mobile previews are capped. The rhythm tokens below are sized in `cqi` — 1% of the inline size of the nearest query container, which on these pages is always the preview frame. That matters: a `vw`-based clamp keeps measuring the browser window, so a 375px phone preview would render desktop-sized headings and three-rem gutters and the preview would be a lie. In `cqi` the type and spacing shrink with the frame, so what the owner sees is what the phone gets. Outside a container, `cqi` falls back to the small viewport, which is exactly the right answer for the page shell. -------------------------------------------------------------------------- */ :root { /* All three preview widths are lengths, never a percentage. Transitioning max-width from `100%` to a pixel value makes the browser hold the result as a blended calc(), and the next switch has nothing clean to animate from — the frame sticks at the old width. 120rem is wider than any desktop this will be previewed on, so it still reads as full bleed. */ --pm-width: 120rem; /* desktop preview — effectively full bleed */ --pm-width-tablet: 48rem; /* 768px */ --pm-width-mobile: 23.4375rem; /* 375px */ --pm-read: 75rem; /* reading column inside the frame */ --pm-gutter: clamp(1.25rem, 0.55rem + 2.2cqi, 3rem); --pm-section-y: clamp(3.25rem, 1.9rem + 4.4cqi, 7rem); --pm-header-h: 4.25rem; /* Display scale. Premium sets its own because the hero has to carry the page on its own without a video, and the Standard h1 is a card title. */ --pm-display: clamp(2.25rem, 1.1rem + 5cqi, 4.25rem); --pm-h2: clamp(1.6rem, 1.05rem + 2.3cqi, 2.5rem); --pm-h3: clamp(1.1rem, 0.95rem + 0.7cqi, 1.4rem); --pm-lead: clamp(1rem, 0.93rem + 0.38cqi, 1.175rem); --pm-radius: var(--radius-lg); --pm-radius-lg: var(--radius-xl); --pm-radius-frame: var(--radius-3xl); /* The lean shared by every 3D surface — hero portrait, testimonial stack, service flagship — so the page tilts as one object, not six. */ --pm-perspective: 1200px; --pm-tilt: 7deg; } /* ========================================================================== LAYER 3 — EDITOR (editor.php) -------------------------------------------------------------------------- The builder is an application screen, not a page of marketing, so it gets its own measurements: a form column wide enough for a sentence of helper text, a device frame that has to survive three viewport sizes, and a sticky bar whose height every scroll container has to allow for. The virtual viewport widths below are the widths the template INSIDE the frame believes it is being read at. They are deliberately real device widths rather than round numbers, because the templates' own breakpoints were written against real devices. ========================================================================== */ :root { /* The two columns. The form stops growing once a line of help text fits comfortably; everything past that belongs to the preview. */ --ed-form-w: clamp(25rem, 40vw, 35rem); --ed-gutter: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); --ed-radius: var(--radius-lg); /* cards, inputs, drop zones */ --ed-radius-sm: var(--radius-sm); /* chips, counters, small controls */ --ed-radius-lg: var(--radius-xl); /* groups */ --ed-field-gap: var(--space-5); /* between two fields */ --ed-group-gap: var(--space-3); /* between two groups */ --ed-bar-h: 4.75rem; /* sticky action bar */ /* Device frame. Bezel and corner radius change with the mode because a phone, a tablet and a laptop are not the same object. */ --ed-bezel-mobile: 0.625rem; --ed-bezel-tablet: 0.75rem; --ed-bezel-desktop: 0.4rem; --ed-frame-mobile: 2.75rem; --ed-frame-tablet: 1.5rem; --ed-frame-desktop: var(--radius-lg); --ed-chrome-h: 1.75rem; /* the browser bar in desktop mode */ --ed-stage-pad: var(--space-6); /* Virtual viewport widths, unitless so they can be divided to find scale. */ --ed-vw-mobile: 390; --ed-vw-tablet: 834; --ed-vw-desktop: 1440; /* Screen aspect (height ÷ width) for each mode. */ --ed-ar-mobile: 2.08; --ed-ar-tablet: 1.33; --ed-ar-desktop: 0.625; /* How wide the frame is allowed to get, whatever room the stage has. */ --ed-cap-mobile: 390; --ed-cap-tablet: 720; --ed-cap-desktop: 1100; } /* -------------------------------------------------------------------------- FEATURES PAGE The hero stage is an exploded view — a photo with the form and the page it writes floating over it — so most of these are about depth: how far an element lifts off the photo, how much it tilts, and how frosted it is. -------------------------------------------------------------------------- */ :root { --ft-stage-radius: var(--radius-3xl); --ft-float-radius: var(--radius-xl); --ft-tilt: 6deg; /* the stage's resting rotation */ --ft-perspective: 1400px; /* Frosted floating panels */ --ft-glass: rgb(var(--rgb-white) / 0.78); --ft-glass-border: rgb(var(--rgb-white) / 0.7); --ft-glass-blur: 18px; /* Bento */ --ft-bento-gap: var(--space-5); --ft-bento-radius: var(--radius-2xl); --ft-bento-pad: clamp(1.25rem, 0.9rem + 1.3vw, 2rem); --ft-bento-min: 13rem; /* shortest a cell may be */ /* Career showcase */ --ft-shot-radius: var(--radius-2xl); --ft-card-radius: var(--radius-lg); --ft-tab-radius: var(--radius-lg); /* Swatch chips in the theme cell */ --ft-swatch: 1.75rem; } [data-theme="dark"] { --ft-glass: rgb(var(--rgb-slate-900) / 0.72); --ft-glass-border: rgb(var(--rgb-slate-50) / 0.14); } .theme-inverse { --ft-glass: rgb(var(--rgb-slate-900) / 0.72); --ft-glass-border: rgb(var(--rgb-slate-50) / 0.14); } /* -------------------------------------------------------------------------- ACCOUNT AREA (account.php, verify.php) A portal rather than a marketing page: quieter surfaces, tighter rhythm, and one rail width that the sidebar, the tab strip and the mobile sheet all measure themselves against. -------------------------------------------------------------------------- */ :root { /* Shell */ --ac-rail: 15rem; /* sidebar width on desktop */ --ac-gap: var(--space-8); /* rail-to-content gutter */ --ac-radius: var(--radius-xl); --ac-card-radius: var(--radius-lg); --ac-pad: clamp(1.25rem, 0.95rem + 1.2vw, 1.875rem); /* Panels sit on a slightly cooler plane than the page, so the dashboard reads as a surface you work on rather than a document you read. */ --ac-surface: var(--color-surface); --ac-surface-sunken: var(--slate-100); --ac-border: var(--color-border); /* Tabs */ --ac-tab-radius: var(--radius-md); --ac-tab-height: 2.75rem; --ac-tab-active-bg: var(--color-accent-soft); --ac-tab-active-text: var(--color-accent-text); /* Avatars — one scale, used by the header, the page head and the cards. */ --ac-avatar-sm: 2rem; --ac-avatar-md: 3rem; --ac-avatar-lg: clamp(3.25rem, 2.8rem + 1.8vw, 4.25rem); /* Profile cards */ --ac-card-min: 19rem; /* narrowest a card may get */ --ac-thumb: 3.5rem; /* Status pills carry the only non-brand colour on the page. */ --ac-warn: var(--amber-700); --ac-warn-soft: #fffbeb; --ac-warn-border: rgb(var(--rgb-amber-500) / 0.40); /* Tier chips */ --ac-tier-basic: var(--slate-600); --ac-tier-basic-soft: var(--slate-100); --ac-tier-standard: var(--blue-600); --ac-tier-standard-soft: var(--blue-50); --ac-tier-premium: var(--violet-700); --ac-tier-premium-soft: #f5f3ff; /* One-time-code boxes */ --ac-otp-size: clamp(2.75rem, 2.1rem + 2.6vw, 3.5rem); --ac-otp-gap: clamp(0.4rem, 0.2rem + 0.8vw, 0.75rem); --ac-otp-radius: var(--radius-md); } [data-theme="dark"] { --ac-surface-sunken: #1a2639; --ac-warn: var(--amber-400); --ac-warn-soft: rgb(var(--rgb-amber-500) / 0.14); --ac-warn-border: rgb(var(--rgb-amber-500) / 0.36); --ac-tier-basic: var(--slate-300); --ac-tier-basic-soft: rgb(var(--rgb-slate-50) / 0.08); --ac-tier-standard: var(--blue-400); --ac-tier-standard-soft: rgb(var(--rgb-blue-500) / 0.16); --ac-tier-premium: var(--violet-300); --ac-tier-premium-soft: rgb(var(--rgb-violet-600) / 0.26); } /* -------------------------------------------------------------------------- ADMIN CONSOLE (admin.php) One page, one job: find a profile and switch it on. It borrows the account area's surfaces so the two do not feel like different products, and adds only the three state colours the list is read by — which are the same three states the owner sees on their own dashboard, named the same way. -------------------------------------------------------------------------- */ :root { --adm-gap: var(--space-4); --adm-pad: var(--space-4); --adm-radius: var(--ac-card-radius); --adm-figure-min: 7rem; /* narrowest a count tile may get */ --adm-ref-width: 11rem; /* the payment reference box */ /* Live: approved, and public for good. */ --adm-live: var(--color-success-text); --adm-live-soft: var(--color-success-soft); --adm-live-border: rgb(var(--rgb-green-500) / 0.38); /* On trial: public, but on a clock. */ --adm-wait: var(--ac-warn); --adm-wait-soft: var(--ac-warn-soft); --adm-wait-border: var(--ac-warn-border); /* Inactive: waiting on a payment. Deliberately the quietest of the three — it is a state to work through, not an alarm. */ --adm-off: var(--color-text-muted); --adm-off-soft: var(--ac-surface-sunken); --adm-off-border: var(--ac-border); /* A lead: somebody who filled a profile in and stopped at the register step. Not a state a profile can be in — these are not profiles — so it is deliberately a different hue from the three above, and a quiet one. It is a note to follow up, not a thing that needs doing today. */ --adm-lead: var(--ac-tier-standard); --adm-lead-soft: var(--ac-tier-standard-soft); --adm-lead-border: rgb(var(--rgb-blue-500) / 0.35); } /* -------------------------------------------------------------------------- PRICING PAGE (pricing.php) Three cards that have to be compared at a glance, so almost everything here exists to keep them identical to each other — one radius, one padding, one column width — and then to let exactly one of them break the pattern. The --pr-pop-* group is that one card's licence to sit higher, glow and carry a heavier border; nothing else on the page is allowed to use it. -------------------------------------------------------------------------- */ :root { /* The grid. A card narrower than this stops being readable before it stops fitting, which is why the three columns drop to one in a single step. */ --pr-card-min: 17.5rem; --pr-card-gap: var(--space-5); --pr-card-radius: var(--radius-2xl); --pr-card-pad: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); /* The highlighted middle tier. The lift is small on purpose: enough to read as "this one", not so much that the other two look broken. */ --pr-pop-lift: 1.25rem; /* how far above its neighbours it sits */ --pr-pop-border: var(--color-accent); --pr-pop-glow: 0 0 0 1px var(--color-accent), 0 18px 44px -14px rgb(var(--rgb-blue-500) / 0.42), 0 2px 10px -2px rgb(var(--rgb-blue-500) / 0.22); --pr-pop-wash: linear-gradient( 180deg, rgb(var(--rgb-blue-500) / 0.10) 0%, rgb(var(--rgb-blue-500) / 0.00) 38%); /* Price block */ --pr-amount: clamp(2rem, 1.6rem + 1.9vw, 2.75rem); --pr-currency: var(--text-lg); /* Comparison table */ --pr-table-radius: var(--radius-xl); --pr-table-min: 44rem; /* below this the table scrolls sideways */ --pr-table-row: 3.25rem; --pr-table-feature: 16rem; /* the sticky first column */ --pr-table-stripe: var(--color-surface-muted); --pr-yes: var(--color-success-text); --pr-no: var(--color-text-subtle); /* NFC upsell */ --pr-nfc-radius: var(--radius-2xl); --pr-nfc-min: 16rem; } [data-theme="dark"] { /* Dark surfaces swallow a blue glow, so the highlighted card leans on its border and a wider, softer halo instead of on brightness. */ --pr-pop-glow: 0 0 0 1px var(--color-accent), 0 22px 54px -16px rgb(var(--rgb-blue-500) / 0.55), 0 2px 12px -2px rgb(var(--rgb-blue-500) / 0.30); --pr-pop-wash: linear-gradient( 180deg, rgb(var(--rgb-blue-500) / 0.16) 0%, rgb(var(--rgb-blue-500) / 0.00) 40%); --pr-table-stripe: var(--color-surface-muted); } /* -------------------------------------------------------------------------- HOW IT WORKS PAGE (how-it-works.php) One idea runs through this group: the page is a journey, so it is drawn as a line. Everything below either sits on that line (the numbered markers), hangs off it (the step cards), or deliberately steps away from it to break the rhythm (the NFC bento, the closing panel). The --hw-glass-* group is the backdrop-blur recipe used by the floating labels on the step images and by the bento tiles, kept in one place so a tile and a label never disagree about how much of the page shows through. -------------------------------------------------------------------------- */ :root { /* ---- The timeline rail ---- */ --hw-rail-w: 2px; /* the line itself */ --hw-marker: 2.75rem; /* the numbered disc that sits on it */ --hw-marker-ring: 6px; /* page-coloured halo punching the line out */ /* The line is drawn twice: this is the unwalked part, a hairline that fades out at both ends so it never looks like it was cut off. */ --hw-line: linear-gradient( 180deg, rgb(var(--rgb-slate-900) / 0) 0%, var(--color-border-strong) 7%, var(--color-border-strong) 93%, rgb(var(--rgb-slate-900) / 0) 100%); /* And this is the part already walked, painted over the top as the reader scrolls. Script sets --hw-progress; with no script it stays at 0. */ --hw-line-done: linear-gradient( 180deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%); --hw-progress: 0%; /* ---- Step ---- */ --hw-step-gap: var(--space-10); /* between one step and the next */ --hw-step-pad: clamp(1.1rem, 0.9rem + 0.9vw, 1.75rem); --hw-step-radius: var(--radius-2xl); --hw-num-size: var(--text-lg); /* The zig-zag images. A shallow tilt, alternating left and right down the page, which is what stops five photographs in a column from reading as a list of five photographs. It flattens on hover and under reduced motion. */ --hw-media-radius: var(--radius-2xl); --hw-media-ratio: 4 / 3; --hw-media-tilt: 2.4deg; --hw-media-depth: 1200px; --hw-media-shadow: var(--shadow-xl); /* ---- Glass ---- */ --hw-glass-bg: rgb(var(--rgb-white) / 0.72); --hw-glass-border: rgb(var(--rgb-white) / 0.55); --hw-glass-blur: blur(14px) saturate(140%); --hw-glass-shadow: var(--shadow-lg); --hw-glass-text: var(--slate-900); --hw-glass-text-soft: var(--slate-600); /* ---- NFC bento ---- */ --hw-bento-radius: var(--radius-2xl); --hw-bento-gap: var(--space-4); --hw-bento-min: 11rem; /* the shortest a small tile may be */ /* ---- Closing panel ---- */ --hw-cta-radius: var(--radius-3xl); --hw-cta-min: 22rem; /* Dark enough for white text to pass on the photograph underneath, and angled so the type side is the darkest part of it. */ --hw-cta-overlay: linear-gradient( 105deg, rgb(var(--rgb-slate-900) / 0.93) 0%, rgb(var(--rgb-slate-900) / 0.82) 42%, rgb(var(--rgb-slate-900) / 0.45) 100%); } [data-theme="dark"] { /* White glass over a dark page turns into fog. On dark the tiles borrow the raised surface instead and keep only the blur. */ --hw-glass-bg: rgb(var(--rgb-slate-900) / 0.66); --hw-glass-border: rgb(var(--rgb-white) / 0.14); --hw-glass-shadow: var(--shadow-xl); --hw-glass-text: var(--slate-50); --hw-glass-text-soft: var(--slate-400); --hw-line: linear-gradient( 180deg, rgb(var(--rgb-white) / 0) 0%, var(--color-border-strong) 7%, var(--color-border-strong) 93%, rgb(var(--rgb-white) / 0) 100%); --hw-cta-overlay: linear-gradient( 105deg, rgb(var(--rgb-slate-900) / 0.95) 0%, rgb(var(--rgb-slate-900) / 0.88) 42%, rgb(var(--rgb-slate-900) / 0.55) 100%); } /* -------------------------------------------------------------------------- FAQ ACCORDION (shared: pricing.php, faq.php) Promoted out of the pricing group when the FAQ page started using the same component. Two pages now share one set of numbers, which is the only way an accordion on one page cannot quietly drift from the other. -------------------------------------------------------------------------- */ :root { --faq-radius: var(--radius-xl); --faq-pad: clamp(1rem, 0.85rem + 0.6vw, 1.4rem); --faq-gap: var(--space-3); } /* -------------------------------------------------------------------------- INFORMATIONAL PAGES (about-us, contact-us, faq, support, privacy-policy, terms-and-conditions) Six pages with one job between them: be read. So this group is mostly about the reading column — its width, its rhythm, and the small number of card shapes that carry the few things on these pages that are not prose. -------------------------------------------------------------------------- */ :root { /* ---- Page hero ---- */ --info-hero-pad: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem); --info-hero-wash: radial-gradient( 62rem 28rem at 50% -18%, rgb(var(--rgb-blue-500) / 0.1) 0%, rgb(var(--rgb-blue-500) / 0) 70%); /* ---- Long-form reading ---- */ /* 68 characters at this size. Wider than this and the eye loses the start of the next line; narrower and a legal clause breaks into confetti. */ --info-measure: 44rem; --info-prose-size: var(--text-md); --info-prose-leading: var(--leading-relaxed); --info-prose-gap: var(--space-5); /* between paragraphs */ --info-prose-rule: 1px solid var(--color-border); --info-h2-space: var(--space-12); /* air above a new clause */ --info-h3-space: var(--space-8); /* ---- Cards ---- */ --info-card-radius: var(--radius-2xl); --info-card-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem); --info-card-gap: var(--space-4); --info-card-min: 15rem; /* ---- The glowing support button ---- */ /* Two shadows: a tight ring that reads as an edge, and a wide soft one that reads as light coming off it. */ --info-glow: 0 0 0 1px rgb(var(--rgb-green-500) / 0.35), 0 1.25rem 2.5rem -0.75rem rgb(var(--rgb-green-500) / 0.45); --info-glow-hover: 0 0 0 1px rgb(var(--rgb-green-500) / 0.5), 0 1.5rem 3rem -0.75rem rgb(var(--rgb-green-500) / 0.6); /* ---- Contents sidebar on the legal pages ---- */ --info-toc-w: 15rem; --info-toc-top: 6rem; /* clears the sticky header */ } [data-theme="dark"] { --info-hero-wash: radial-gradient( 62rem 28rem at 50% -18%, rgb(var(--rgb-blue-500) / 0.16) 0%, rgb(var(--rgb-blue-500) / 0) 70%); }