/* ========================================================================= Four Dots Australia — Design System Type: Poppins (display + body) · Space Mono (signal) Themes driven by [data-theme] on . Hero variant via [data-hero]. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap'); /* ---- Default theme: INK / SIGNAL (dark + electric lime) ---- */ :root, [data-theme="ink"] { --bg: oklch(0.17 0.012 264); --bg-2: oklch(0.205 0.014 264); --bg-3: oklch(0.245 0.016 264); --text: oklch(0.97 0.004 250); --text-2: oklch(0.74 0.012 258); --text-3: oklch(0.58 0.014 258); --line: oklch(0.34 0.014 264); --line-2: oklch(0.28 0.014 264); --accent: oklch(0.86 0.18 142); /* electric lime/signal */ --accent-2: oklch(0.80 0.17 145); --accent-ink: oklch(0.22 0.04 150); /* text on accent */ --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent); /* four-dot hues — shared chroma/lightness, varied hue */ --d1: oklch(0.86 0.18 142); --d2: oklch(0.80 0.15 215); --d3: oklch(0.83 0.15 90); --d4: oklch(0.78 0.16 28); --hero-glow: color-mix(in oklab, var(--accent) 22%, transparent); --card-shadow: none; --logo-invert: 0; color-scheme: dark; } /* ---- DAYLIGHT (warm off-white + cobalt) ---- */ [data-theme="day"] { --bg: oklch(0.975 0.006 95); --bg-2: oklch(0.995 0.004 95); --bg-3: oklch(0.945 0.008 95); --text: oklch(0.22 0.018 264); --text-2: oklch(0.42 0.018 264); --text-3: oklch(0.55 0.016 264); --line: oklch(0.88 0.008 95); --line-2: oklch(0.92 0.006 95); --accent: oklch(0.55 0.18 258); /* cobalt */ --accent-2: oklch(0.50 0.18 258); --accent-ink: oklch(0.99 0.01 258); --accent-soft: color-mix(in oklab, var(--accent) 10%, transparent); --d1: oklch(0.55 0.18 258); --d2: oklch(0.58 0.15 162); --d3: oklch(0.62 0.17 40); --d4: oklch(0.55 0.20 330); --hero-glow: color-mix(in oklab, var(--accent) 12%, transparent); --card-shadow: 0 1px 2px oklch(0.5 0.02 264 / 0.05), 0 12px 32px oklch(0.5 0.02 264 / 0.06); --logo-invert: 1; color-scheme: light; } /* ---- MIDNIGHT (lighter cobalt blue + signal orange) ---- Client brief: lighten the dark navy to a lighter, brand-blue and push the orange harder — matching fourdots.com / fourdots.com.au. Lightness of the blues raised (0.23→0.31) and shifted toward a truer cobalt (hue 262→256) with more chroma; orange brightened and used more prominently. */ [data-theme="mid"] { --bg: oklch(0.31 0.078 256); --bg-2: oklch(0.36 0.084 256); --bg-3: oklch(0.41 0.088 256); --text: oklch(0.98 0.006 250); --text-2: oklch(0.83 0.03 250); --text-3: oklch(0.70 0.04 255); --line: oklch(0.50 0.07 256); --line-2: oklch(0.43 0.065 256); --accent: oklch(0.74 0.175 52); /* signal orange — punchier */ --accent-2: oklch(0.69 0.175 48); --accent-ink: oklch(0.23 0.05 50); --accent-soft: color-mix(in oklab, var(--accent) 18%, transparent); --d1: oklch(0.74 0.175 52); --d2: oklch(0.82 0.13 210); --d3: oklch(0.84 0.14 135); --d4: oklch(0.76 0.16 350); --hero-glow: color-mix(in oklab, var(--accent) 26%, transparent); --card-shadow: none; --logo-invert: 0; color-scheme: dark; } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Poppins', system-ui, sans-serif; font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01"; transition: background .4s ease, color .4s ease; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: var(--accent); color: var(--accent-ink); } /* --------------------------------------------------------------- layout */ .wrap { width: min(1240px, 100% - 48px); margin-inline: auto; } .wrap-narrow { width: min(880px, 100% - 48px); margin-inline: auto; } section { position: relative; contain: layout paint; } .pad { padding-block: clamp(72px, 9vw, 132px); } .pad-sm { padding-block: clamp(48px, 6vw, 84px); } /* --------------------------------------------------------------- type */ .display { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; } h1.display { font-size: clamp(2.5rem, 5.8vw, 4.7rem); } h2.display { font-size: clamp(1.95rem, 4vw, 3.2rem); line-height: 1.05; } h3.display { font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.12; } .lede { font-size: clamp(1.12rem, 1.7vw, 1.35rem); line-height: 1.55; color: var(--text-2); text-wrap: pretty; } .eyebrow { font-family: 'Space Mono', monospace; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 10px; } .eyebrow .dots { --dot: 5px; } .accent-text { color: var(--accent); } .mono { font-family: 'Space Mono', monospace; } /* --------------------------------------------------------------- dots glyph */ .dots { --dot: 7px; --gap: 4px; display: inline-grid; grid-template-columns: var(--dot) var(--dot); gap: var(--gap); flex: none; } .dots i { width: var(--dot); height: var(--dot); border-radius: 50%; display: block; } .dots i:nth-child(1){ background: var(--d1); } .dots i:nth-child(2){ background: var(--d2); } .dots i:nth-child(3){ background: var(--d3); } .dots i:nth-child(4){ background: var(--d4); } .dots.mono-dots i { background: currentColor; } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; border: 1px solid transparent; transition: transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-2); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn-ghost:hover { border-color: var(--text-2); background: color-mix(in oklab, var(--text) 5%, transparent); } .btn-lg { padding: 18px 32px; font-size: 1.06rem; } .btn .arr { transition: transform .2s ease; } .btn:hover .arr { transform: translateX(3px); } /* --------------------------------------------------------------- cards */ .card { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--card-shadow); } /* --------------------------------------------------------------- pills/chips */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.85rem; color: var(--text-2); font-weight: 500; } .chip .tick { color: var(--accent); font-weight: 700; } /* --------------------------------------------------------------- divider */ .rule { height: 1px; background: var(--line-2); border: 0; } /* --------------------------------------------------------------- utility */ .muted { color: var(--text-2); } .center { text-align: center; } [hidden] { display: none !important; } @media (max-width: 720px) { .wrap, .wrap-narrow { width: calc(100% - 36px); } body { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }