/* ============================================================================ DurDurTec — Design Tokens Derived from the final two-colour logo: ink #525542 "Dur Dur" + tagline + mark H 69.5 S 12.6% L 29.6% citron #646f26 "Tec" H 70.4 S 50.0% L 28.2% The two share a hue and a lightness and differ only in saturation. That is a disciplined identity, but it has one consequence to design around: contrast between them is 1.37:1, so they are near-identical in luminance. - Never set one on the other. The text vanishes. - In greyscale or single-colour print, "Tec" merges into "Dur Dur". Ship a mono lockup for invoices, faxes, and embroidery. - Both are yellow-green, so the two-tone distinction is weak for deuteranopic and protanopic viewers. Never let colour alone carry meaning anywhere in the theme. Load order: durdurtec-tokens.css → durdurtec.css → page CSS Nothing in this file emits visual output except the primitives at the bottom. It is safe to load first and cache aggressively. ============================================================================ */ :root { /* -------------------------------------------------------------------------- 1. BRAND RAMP Hue 69.5deg / sat 12.6% locked from the logo. Lightness stepped. 700 is the logo colour itself, near enough to be interchangeable. -------------------------------------------------------------------------- */ --dt-brand-50: #f7f7f5; --dt-brand-100: #eeeee9; --dt-brand-200: #dddfd5; --dt-brand-300: #c4c6b6; --dt-brand-400: #a2a68c; --dt-brand-500: #7e8365; --dt-brand-600: #62664f; --dt-brand-700: #525542; /* the logo ink, verbatim. Step 700 IS the brand. */ --dt-brand-800: #3e4132; --dt-brand-900: #2e2f25; --dt-brand-950: #1d1d18; /* NOTE: step 700 of each ramp is now the canonical logo value itself, so the file and the runtime agree. The admin brand_accent / primary_color override injects the same values unless someone deliberately rebrands. */ /* -------------------------------------------------------------------------- 2. NEUTRALS — warm, not grey Same hue as the brand, saturation crushed to 6%. This is the single decision that stops the palette reading as "template + logo colour". Never substitute a pure grey (#888 etc.) anywhere in the theme. -------------------------------------------------------------------------- */ --dt-ink-0: #ffffff; --dt-ink-50: #f9f9f8; --dt-ink-100: #f2f2f0; --dt-ink-200: #e5e6e3; --dt-ink-300: #cecfc9; --dt-ink-400: #a5a69b; --dt-ink-500: #7f8273; --dt-ink-600: #64655a; --dt-ink-700: #4c4d44; --dt-ink-800: #34352f; --dt-ink-900: #21221e; --dt-ink-950: #141412; /* -------------------------------------------------------------------------- 3. CITRON — the logo's second colour, "Tec" Sampled #646f26. Hue 70.4deg, sat 50%, lightness 28.2%. Same hue as the brand ink, ~4x the saturation, identical lightness. 700 is the logo colour verbatim. USE RULES — read these before reaching for citron: citron-700 + white text = 5.48:1 -> primary CTA button. AA body. citron-500 + ink-900 text= 7.07:1 -> badges, chips, dark-surface fills. citron-500 AS text on white = 2.26:1 -> FAILS. Never do this. citron-600 + white text = 3.58:1 -> large text only, never body. Rationing: one citron-filled element per viewport. Everything structural stays brand or ink. Two citron buttons on a screen means one is wrong. -------------------------------------------------------------------------- */ --dt-citron-50: #f8f9f3; --dt-citron-100: #f2f4e6; --dt-citron-200: #e5eaca; --dt-citron-300: #d2dd9f; --dt-citron-400: #bacb67; --dt-citron-500: #a1b63d; --dt-citron-600: #7f8f30; --dt-citron-700: #646f26; /* the logo "Tec", verbatim. */ --dt-citron-800: #4b551e; --dt-citron-900: #353c16; /* Back-compat aliases so components can say "accent" and stay readable. */ --dt-accent: var(--dt-citron-700); --dt-accent-hover: var(--dt-citron-800); --dt-accent-bright:var(--dt-citron-500); /* -------------------------------------------------------------------------- 4. SEMANTIC — desaturated to sit beside the brand without shouting All four carry white text at AA or better. -------------------------------------------------------------------------- */ --dt-success: #4f7d3a; /* active service, paid */ --dt-success-bg: #eef4ea; --dt-warning: #b8862b; /* due soon, pending */ --dt-warning-bg: #fbf3e2; --dt-danger: #b3402e; /* overdue, suspended, destructive */ --dt-danger-bg: #f9eeed; --dt-info: #3a6076; --dt-info-bg: #eef2f5; /* Selected rows and badges — the accent at 8% weight. */ --dt-accent-tint: #eef2de; /* -------------------------------------------------------------------------- 5. SURFACE + TEXT ROLES Reference these in components, never the raw ramp. Swapping these six lines is what makes dark mode and admin theming work. -------------------------------------------------------------------------- */ --dt-surface: var(--dt-ink-0); --dt-surface-sunken: var(--dt-ink-50); --dt-surface-raised: var(--dt-ink-0); --dt-surface-inverse: var(--dt-brand-900); --dt-text: var(--dt-ink-900); --dt-text-muted: var(--dt-ink-600); --dt-text-subtle: var(--dt-ink-500); --dt-text-inverse: var(--dt-ink-50); --dt-text-link: var(--dt-brand-700); --dt-border: var(--dt-ink-200); --dt-border-strong: var(--dt-ink-300); --dt-border-brand: var(--dt-brand-700); /* -------------------------------------------------------------------------- 6. TYPE Sora for display, Plus Jakarta Sans for body, JetBrains Mono for every number the business sells. All three are self-hosted — do not add a CDN. The site is English-only by decision, so these stacks carry no additional script coverage. See DESIGN-SPEC.md. Weight discipline: 400 body, 500 UI labels, 600 headings. No 700, no 300. -------------------------------------------------------------------------- */ --dt-font-display: "Sora", system-ui, sans-serif; --dt-font-sans: "Plus Jakarta Sans", system-ui, sans-serif; --dt-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid scale, 1.25 ratio. Clamps so mobile never needs its own overrides. */ --dt-text-3xs: 0.625rem; /* 10px spec 7: chip */ --dt-text-2xs: 0.6875rem; /* 11px legal, meta */ --dt-text-xs: 0.75rem; /* 12px eyebrows */ --dt-text-body: 0.84375rem; /* 13.5px card + section body */ --dt-text-sm: 0.875rem; /* 14px captions */ --dt-text-base: 0.875rem; /* 14px body — dense */ --dt-text-body-lg: 1rem; /* 16px long-form only */ --dt-text-card: 1.0625rem; /* 17px card title */ --dt-text-lg: 1.125rem; /* 18px lead */ --dt-text-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); --dt-text-2xl: clamp(1.5rem, 1.2vw + 1.2rem, 1.95rem); --dt-text-3xl: clamp(1.625rem, 1.6vw + 1.1rem, 2rem); /* 26-32px section heading */ --dt-text-4xl: clamp(2.75rem, 3.0vw + 1.6rem, 3.25rem); /* 44-52px hero headline */ --dt-leading-tight: 1.1; --dt-leading-snug: 1.3; --dt-leading-normal: 1.7; /* airy body copy */ --dt-leading-longform: 1.75; /* spec 4: legal pages only */ --dt-tracking-display: -0.035em; /* 40px+ hero headlines */ --dt-tracking-tight: -0.028em; /* 24-38px section headings */ --dt-tracking-snug: -0.02em; /* 18-23px sub-heads */ --dt-tracking-normal: 0; --dt-tracking-card: -0.015em; /* 17px card titles */ --dt-tracking-chip: 0.1em; /* spec 7: two-letter chip */ --dt-tracking-eyebrow: 0.02em; /* section eyebrow and mono data */ --dt-tracking-wide: 0.12em; /* mono eyebrows and micro-labels */ --dt-tracking-wider: 0.16em; /* the smallest mono labels */ --dt-weight-body: 400; --dt-weight-ui: 500; /* the only mid weight the system uses */ --dt-weight-heading: 600; /* headings AND buttons. There is no 700. */ /* -------------------------------------------------------------------------- 7. SPACE — 4px base -------------------------------------------------------------------------- */ --dt-space-1: 0.25rem; --dt-space-2: 0.5rem; --dt-space-3: 0.75rem; --dt-space-4: 1rem; --dt-space-5: 1.5rem; --dt-space-6: 2rem; --dt-space-7: 3rem; --dt-space-8: 4rem; --dt-space-9: 6rem; --dt-space-10: 8rem; /* 4px base unit throughout. Marketing: 12 columns, 1200px max, 32px gutters. Client area: 1440px fluid, 24px gutters, 252px sidebar. */ --dt-section-y: clamp(3.5rem, 6vw, 6.5rem); /* generous, not dense */ --dt-shell-max: 1200px; /* marketing content column */ --dt-shell-pad: clamp(1rem, 3vw, 2rem); --dt-grid-gap: 22px; /* spec 3: card grid gap */ --dt-bar-width: 3px; /* spec 7: notice accent bar */ --dt-reveal-rise: 12px; /* spec 5: entry animation rise */ --dt-reveal-step: 60ms; /* spec 5: per-card stagger */ --dt-art-lg: 192px; /* section-scale illustration slot */ --dt-grid-columns: 12; --dt-gutter: 32px; /* marketing */ --dt-gutter-client: 24px; /* client area */ --dt-client-max: 1440px; --dt-sidebar-w: 252px; /* -------------------------------------------------------------------------- 8. RADIUS — the shape signature The mark is a rounded square whose corner radius is roughly a sixth of its side. That generosity is the brand's shape voice: nothing in this theme should have a 4px corner. -------------------------------------------------------------------------- */ --dt-radius-xs: 6px; /* chips, tags, pills */ --dt-radius-sm: 10px; /* buttons, inputs */ --dt-radius-md: 14px; /* small surfaces, notices */ --dt-radius-lg: 18px; /* CARDS — the signature radius */ --dt-radius-xl: 24px; /* large panels, hero media */ --dt-radius-plaque: 16.5%; /* the logo lockup ratio — icon tiles only */ --dt-radius-pill: 999px; /* -------------------------------------------------------------------------- 9. BORDER — thick, because the mark is a stroke not a fill 1px hairlines are the default look this brand is trying not to be. -------------------------------------------------------------------------- */ /* Cards are separated by SHADOW, not by an outline. Borders are for inputs, tables and dividers only — never the default card edge. */ --dt-border-width: 1px; --dt-border-width-strong: 2px; /* featured plan, active tab */ /* -------------------------------------------------------------------------- 10. ELEVATION Shadows are tinted with the brand hue, never neutral black. Used sparingly: the plaque outline is the primary separation device, shadow is secondary. -------------------------------------------------------------------------- */ /* Two-layer shadows: a tight contact shadow plus a wide soft one. Always tinted with the brand hue — never neutral black. This is the primary way surfaces separate from the page. */ --dt-shadow-sm: 0 1px 2px rgba(82, 85, 66, 0.06); --dt-shadow-card: 0 1px 2px rgba(82, 85, 66, 0.06), 0 10px 26px -12px rgba(82, 85, 66, 0.15); --dt-shadow-hover: 0 2px 4px rgba(82, 85, 66, 0.10), 0 20px 40px -14px rgba(82, 85, 66, 0.22); --dt-shadow-panel: 0 4px 12px rgba(82, 85, 66, 0.08), 0 32px 64px -24px rgba(82, 85, 66, 0.18); /* Two layers, because opacity alone cannot pass WCAG 2.2 SC 1.4.11. A 20% citron wash on white measures 1.31:1 and even 70% reaches only 2.97:1 -- below the 3:1 a focus indicator must carry. So the indicator is a solid citron-700 core (5.46:1) with the soft wash kept as an outer halo. This is spec 7 read literally: a citron border PLUS a ring. */ --dt-shadow-focus: 0 0 0 2px var(--dt-citron-700), 0 0 0 5px rgba(100, 111, 38, 0.20); /* Back-compat aliases. */ --dt-shadow-md: var(--dt-shadow-card); --dt-shadow-lg: var(--dt-shadow-hover); /* Card lift distance on hover. */ --dt-lift: -6px; --dt-lift-1: -1px; /* button hover, spec 7 */ --dt-lift-sm: -3px; /* -------------------------------------------------------------------------- 11. MOTION -------------------------------------------------------------------------- */ /* Short, flat, purposeful. Nothing bounces. Nothing over 240ms except page entry. Four durations, no others. */ --dt-ease: cubic-bezier(0.2, 0.8, 0.3, 1); /* ease-out */ --dt-duration-instant: 120ms; /* linear — border and colour on hover */ --dt-duration-std: 160ms; /* buttons, inputs, row hover */ --dt-duration-emph: 260ms; /* card lift, shadow bloom, panels */ --dt-duration-art: 320ms; /* illustration float inside a card */ --dt-duration-entry: 400ms; /* page entry: rise 12px + fade, once */ /* Back-compat aliases. */ --dt-duration-1: var(--dt-duration-instant); --dt-duration-2: var(--dt-duration-std); --dt-duration-3: var(--dt-duration-emph); /* -------------------------------------------------------------------------- 12. Z-INDEX -------------------------------------------------------------------------- */ --dt-z-base: 0; --dt-z-sticky: 100; --dt-z-header: 200; --dt-z-dropdown: 300; --dt-z-overlay: 400; --dt-z-modal: 500; --dt-z-toast: 600; } /* ============================================================================ DARK MODE — role swap only. The ramps above never change. DELIBERATELY OPT-IN, not automatic. The theme's own stylesheets still use hardcoded light surfaces, so honouring prefers-color-scheme flips the text roles while the backgrounds stay light — which is how the billing switcher ended up at 2.09:1 contrast on a dark-mode OS. Do NOT re-enable the media query until every theme surface reads from --dt-surface-*. Until then dark mode only applies when something sets data-dt-theme="dark" on . ============================================================================ */ [data-dt-theme="dark"] { --dt-surface: var(--dt-ink-950); --dt-surface-sunken: #0e0e0d; --dt-surface-raised: var(--dt-ink-900); --dt-surface-inverse: var(--dt-ink-50); --dt-text: var(--dt-ink-100); --dt-text-muted: var(--dt-ink-400); --dt-text-subtle: var(--dt-ink-500); --dt-text-inverse: var(--dt-ink-900); --dt-text-link: var(--dt-brand-300); --dt-border: #2c2d27; --dt-border-strong: #3d3e36; --dt-border-brand: var(--dt-brand-400); --dt-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --dt-shadow-md: 0 4px 12px rgba(0,0,0,0.5); --dt-shadow-lg: 0 12px 32px rgba(0,0,0,0.6); } /* Manual override for the theme switcher. */ [data-dt-theme="light"] { color-scheme: light; } [data-dt-theme="dark"] { color-scheme: dark; } /* ============================================================================ SHAPE PRIMITIVES The four shapes everything else is built from. Nothing here is a component; these are the reusable geometry rules. ============================================================================ */ /* --- The card: floats on a shadow, no outline. The signature surface. ---- Cards are separated from the page by a two-layer tinted shadow, never by a border. Content is centred. Generous padding. On hover the whole card lifts and the shadow blooms. */ .dt-card { display: block; background: var(--dt-surface-raised); border-radius: var(--dt-radius-lg); padding: var(--dt-space-6) var(--dt-space-5) var(--dt-space-5); text-align: center; text-decoration: none; box-shadow: var(--dt-shadow-card); transition: transform var(--dt-duration-emph) var(--dt-ease), box-shadow var(--dt-duration-emph) var(--dt-ease); } .dt-card:hover, .dt-card:focus-visible { transform: translateY(var(--dt-lift)); box-shadow: var(--dt-shadow-hover); } /* Featured card: the only one that carries a border, and it is citron. */ .dt-card--feature { border: var(--dt-border-width-strong) solid var(--dt-citron-700); box-shadow: var(--dt-shadow-hover); } /* --- Illustration slot: the visual anchor every card leads with. -------- Fixed height so a grid of cards aligns regardless of artwork. The inner .dt-art-float group drifts up as the card lifts, giving parallax. */ .dt-art { block-size: 96px; display: grid; place-items: center; margin-block-end: var(--dt-space-5); } .dt-art svg { overflow: visible; } /* Section-scale slot: the same artwork in a large section, where the 96px card slot reads as a stray icon. Roughly double. */ .dt-art--lg { block-size: var(--dt-art-lg); margin-block-end: var(--dt-space-6); } .dt-art-float { transition: transform var(--dt-duration-art) var(--dt-ease); } .dt-card:hover .dt-art-float { transform: translateY(-4px); } /* --- Price link: the card's call to action. ---------------------------- */ .dt-card-price { display: inline-flex; align-items: center; gap: var(--dt-space-2); font-size: var(--dt-text-sm); font-weight: var(--dt-weight-heading); color: var(--dt-citron-700); } .dt-card-price .dt-arrow { display: inline-block; transition: transform var(--dt-duration-std) var(--dt-ease); } .dt-card:hover .dt-card-price .dt-arrow { transform: translateX(5px); } /* --- Icon tile: the logo lockup, reusable at any size. --------------------- */ .dt-tile { display: inline-grid; place-items: center; inline-size: var(--dt-space-7); block-size: var(--dt-space-7); border: var(--dt-border-width) solid currentColor; border-radius: var(--dt-radius-plaque); color: var(--dt-brand-700); flex-shrink: 0; } /* --- Eyebrow: the small label above every section heading. ----------------- */ .dt-eyebrow { font-size: var(--dt-text-xs); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-eyebrow); color: var(--dt-citron-700); margin-block-end: var(--dt-space-3); } /* --- Numeric: every price, spec, IP, and uptime figure. ------------------- */ .dt-numeric { font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- Shell: the content column. ------------------------------------------- */ .dt-shell { inline-size: 100%; max-inline-size: var(--dt-shell-max); margin-inline: auto; padding-inline: var(--dt-shell-pad); } .dt-section { padding-block: var(--dt-section-y); } /* --- Spec row: the core primitive of the technical direction. ------------- Hosting is sold on numbers. Every plan card, comparison, and product page states its specs as label/value pairs with the value in mono, not as marketing sentences. Four of these read faster than a paragraph. */ .dt-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--dt-space-3) var(--dt-space-4); border-block-start: var(--dt-border-width) solid var(--dt-border); padding-block-start: var(--dt-space-3); } .dt-spec-item { display: flex; flex-direction: column; gap: 2px; } .dt-spec-label { font-size: var(--dt-text-2xs); letter-spacing: var(--dt-tracking-wide); text-transform: uppercase; color: var(--dt-text-subtle); } .dt-spec-value { font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; font-size: var(--dt-text-base); font-weight: var(--dt-weight-ui); color: var(--dt-text); line-height: var(--dt-leading-tight); } /* --- Icon: monoline, inherits colour, never a filled tile. --------------- */ .dt-icon { inline-size: 1.25em; block-size: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ============================================================================ QUALITY FLOOR ============================================================================ */ /* Visible keyboard focus everywhere. Do not remove. Spec §7: a citron ring, not a hard outline. The transparent outline is there so Windows High Contrast Mode still shows a focus indicator, where box-shadow is discarded. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--dt-border-width-strong) solid transparent; outline-offset: 2px; box-shadow: var(--dt-shadow-focus); /* No border-radius here. A box-shadow ring already follows whatever radius the element has, so forcing one would snap an 18px card down to 10px on focus -- a tight box inside the card, which is the defect this indicator exists to avoid. */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }