/* ========================================================= AMACA DESIGN SYSTEM — TOKENS Derived from angelomacaione.com ========================================================= */ @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-BoldItalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-BlackItalic.otf") format("opentype");font-weight:900;font-style:italic;font-display:swap} :root{ /* — NEUTRALS (obsidian-to-bone scale) — */ --obsidian-950: #07090B; /* page */ --obsidian-900: #0B0E12; /* surface */ --obsidian-850: #10141A; /* elevated */ --obsidian-800: #161B22; /* card · border subtle */ --obsidian-700: #1E242D; /* border */ --obsidian-600: #2A313B; /* border strong */ --obsidian-500: #3A4451; /* muted edge */ --obsidian-400: #5B6573; /* disabled text · control outline */ --obsidian-300: #8A94A3; /* secondary text */ --obsidian-200: #B8C0CB; /* tertiary text */ --obsidian-100: #E3E7EC; /* primary text on dark */ --obsidian-050: #F4F6F8; /* bone */ /* — SEMANTIC · surface and border (v5.0.0) — role aliases on the obsidian ramp; no new values. Role names after Atlassian's elevation and border tokens. */ --surface: var(--obsidian-950); /* the page */ --surface-sunken: var(--obsidian-900); /* sidebar, wells */ --surface-field: var(--obsidian-850); /* inputs and controls at rest */ --surface-raised: var(--obsidian-800); /* card, menu, modal */ --border-subtle: var(--obsidian-800); /* dividers, table rows */ --border: var(--obsidian-700); /* card, chip, panel */ --border-strong: var(--obsidian-600); /* hover, emphasis */ --border-input: var(--obsidian-400); /* a control's outline: 3:1 on its fill (WCAG 1.4.11) */ /* — BRAND (primary accent: magenta F051D5) — */ --primary-100: #FFE3F8; --primary-200: #FFB5EC; --primary-300: #FF85DF; --primary-400: #F868D8; --primary-500: #F051D5; /* primary brand */ --primary-600: #C93BB0; --primary-700: #9A2D87; --primary-800: #66195A; --primary-950: #1D0519; /* data canvas: the ground under charts and timelines */ /* — SECONDARY (electric cyan) — */ --secondary-100: #CCFFFC; --secondary-200: #80FFF8; --secondary-300: #33FFF5; --secondary-400: #19FFF3; --secondary-500: #00FFF2; --secondary-600: #00CCC2; --secondary-700: #009992; /* — TERTIARY (petrol teal) — */ --tertiary-100: #CEEAF1; --tertiary-200: #8FCFDE; --tertiary-300: #4FA9BF; --tertiary-400: #1F85A0; --tertiary-500: #0C6078; --tertiary-600: #084C61; --tertiary-700: #06384A; /* legacy cube colors kept for the logo glow only */ --cube-cyan: #2CE3D0; --cube-mint: #3AFFC7; --cube-aqua: #1FD6F2; /* — SEMANTIC — */ --success: #3AFFC7; --warning: #F6C65B; --danger: #FF5B5B; --info: #5CC8FF; /* tint strengths (v4.3.0) — the two alphas every tinted label wears (badge, chip): color-mix(in srgb, var(--hue) calc(var(--tint-*) * 100%), transparent) */ --tint-fill: 0.08; --tint-edge: 0.3; /* the default badge's deep hue (--tertiary-500) needs the heavier mix */ --tint-fill-deep: 0.12; --tint-edge-deep: 0.4; /* v5.0.0: the rest of the scale every alpha in components.css snaps to (nearest, the smaller at equal distance) */ --tint-faint: 0.04; /* a wash: the open accordion row, a range preview */ --tint-glow: 0.2; /* a glow or a hairline in the hue */ --tint-strong: 0.6; /* a veil of the hue: a fade's edge, the pulse ring */ --opacity-disabled: 0.4; /* every disabled control (v5.0.0) */ --card-strip: var(--primary-500); /* component token: the row card's strip; --primary-500 or a semantic colour (v5.3.0) */ --slider-fill: 0%; /* component token: how far a single slider is filled; the script sets it on the input (v5.3.0) */ /* — GRADIENTS — */ --grad-cube: linear-gradient(135deg, #F051D5 0%, #F868D8 50%, #FF85DF 100%); --grad-signal: linear-gradient(90deg, #F051D5 0%, #FF85DF 100%); --grad-progress: linear-gradient(90deg, #FFB5EC 0%, #F051D5 100%); /* v5.0.0: the filled part of a Stepper and a Progress bar, primary-200 to primary-500 */ --grad-fog: radial-gradient(1200px 600px at 10% -10%, rgba(240,81,213,0.08), transparent 60%), radial-gradient(900px 500px at 90% 110%, rgba(248,104,216,0.05), transparent 60%); --light-hero: radial-gradient(600px 400px at 80% 20%, rgba(240,81,213,0.08), transparent 60%); /* v5.0.0: the light of the case study hero, the page fog's small sister */ /* — TYPE — */ --font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* type scale — perfect-fourth on small / modular on large */ --t-micro: 10px; --t-caption: 12px; --t-small: 13px; --t-body: 15px; --t-lead: 18px; --t-h6: 20px; --t-h5: 24px; --t-h4: 30px; --t-h3: 38px; --t-h2: 52px; --t-h1: 76px; --t-display: 112px; /* fluid headings below the 860px breakpoint (v5.0.0) — the px live here and nowhere else (Utopia-style clamp) */ --t-display-fluid: clamp(48px, 14vw, 80px); --t-h1-fluid: clamp(40px, 9vw, 64px); --t-h2-fluid: clamp(32px, 9vw, 48px); --t-h3-fluid: clamp(26px, 7vw, 36px); --t-h4-fluid: clamp(22px, 6vw, 28px); --t-h5-fluid: clamp(var(--t-lead), 5vw, 22px); --t-lead-fluid: clamp(16px, 3.6vw, var(--t-h6)); --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-loose: 1.65; --tr-tight: -0.04em; --tr-snug: -0.02em; --tr-normal: 0em; --tr-wide: 0.04em; --tr-mono: 0.06em; /* — SPACING (4px base) — */ --s-0: 0; --s-px: 1px; /* v5.0.0, under the 4px step: hairline offsets, sr-only (Polaris space-025, Tailwind px) */ --s-0-5: 2px; /* v5.0.0, under the 4px step: micro gaps, knob inset (Polaris space-050, Carbon spacing-01) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* — RADIUS — */ --r-none: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 999px; /* — BORDER WIDTH (v5.0.0) — two steps; 1.5px snapped to --bw-1 (Primer thin/thick · Atlassian width/focused) */ --bw-1: 1px; --bw-2: 2px; /* — FOCUS (v5.0.0) — the pressable ring's outline, § 6.2 */ --focus-width: 2px; --focus-offset: 3px; /* — SIZE (v5.0.0) — component contract dimensions */ --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --target-dense: 32px; /* accessibility floor #7, dense desktop */ --target-touch: 44px; /* accessibility floor #7, touch */ --w-tooltip: 220px; /* v5.0.0: the widest a tooltip runs before it wraps */ --w-popover-min: 200px; /* v5.0.0: the narrowest popover */ --w-popover: 360px; /* v5.0.0: the widest popover */ --w-modal: 480px; /* v5.0.0: the widest modal */ --w-toast: 360px; /* v5.0.0: the width of the toast region */ /* — SHADOW — */ --sh-0: none; --sh-1: 0 1px 0 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4); --sh-2: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.5); --sh-3: 0 1px 0 0 rgba(255,255,255,0.05) inset, 0 12px 32px rgba(0,0,0,0.55); --sh-4: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 24px 64px rgba(0,0,0,0.6); --sh-glow: 0 0 0 1px rgba(240,81,213,0.35), 0 0 24px rgba(240,81,213,0.25); --sh-glow-soft: 0 0 40px rgba(240,81,213,0.12); --sh-menu: 0 8px 24px rgba(0,0,0,0.4); /* select menu and native picker (v4.3.0) */ --scrim: #07090B99; /* the page behind a modal, dimmed: --obsidian-950 at 60% (v5.0.0) */ --surface-glass: #07090BB3; /* a control floating over content, read through a blur: --obsidian-950 at 70% (v5.0.0) */ --surface-bar: #07090BCC; /* a bar that stays on top while the page scrolls: --obsidian-950 at 80% (v5.0.0) */ /* Materials (v5.0.0): a translucent fill and its blur travel together. The more the fill covers, the more it blurs. */ --blur-veil: 4px; /* pairs with the scrim: the page behind an overlay */ --blur-glass: 8px; /* pairs with the glass surface: a control over the content */ --blur-bar: 16px; /* pairs with the bar surface: a bar over the content */ --blur-light: 96px; /* the light of the feature card: blurs its own glow, not what is behind */ /* focus rings (v4.2.0) — the two § 6.2 literals and the error twin, now named */ --ring-halo: 0 0 0 4px rgba(240,81,213,0.35); --ring-field: 0 0 0 3px rgba(240,81,213,0.15); --ring-field-danger: 0 0 0 3px rgba(255,91,91,0.15); /* — MOTION (Framer-aligned: soft, bouncy, confident) — */ --ease-standard: cubic-bezier(0.45, 0, 0.55, 1); /* ease in-out (quad), symmetric: state changes (v5.0.0) */ --ease-accel: cubic-bezier(0.7, 0, 0.84, 0); --ease-decel: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* elastic overshoot */ --ease-soft: cubic-bezier(0.12, 0.23, 0.5, 1); /* gentle out: reading entrances, a page's blocks and cards coming into view (v5.2.0) */ --d-instant: 100ms; --d-quick: 200ms; --d-base: 350ms; --d-slow: 600ms; --d-scene: 900ms; --d-draw: 1200ms; /* data draw-on: chart tracing, count-up, progressive data reveals (§ 43 Charts) */ /* — LOADER (component-specific size scale, § 24 Loader) — */ --loader-xs: 16px; --loader-sm: 24px; --loader-md: 48px; --loader-lg: 96px; /* — LAYOUT — */ --sidebar-w: 260px; --content-max: 1180px; --bp-sm: 480px; /* breakpoints (v5.0.0): media queries cannot read var(), so these are the contract; check 53 holds every @media to them */ --bp-md: 720px; --bp-lg: 900px; --gutter: 24px; /* — STACKING — closed scale, seven layers, no others (§ 3.0.2). Values match the system as built: this scale names the existing layers, it does not renumber them. In-component stacking below 10 (z-index 1 / 2 / 5) is composition, literal by design. — */ --z-sticky: 10; --z-scrim: 15; --z-menu: 20; --z-popover: 30; --z-overlay: 100; --z-toast: 200; --z-max: 1000; } /* ========================================================= GLOBAL RESET + BASE ========================================================= */ /* Base rules ride a cascade layer named `base` (v4.1.0). Unlayered, they beat every layered rule regardless of specificity, so under Tailwind v4 the element reset `button{background:none;border:0;color:inherit}` silently erased bg-*, border-* and text-* on every button, and `a{color}` did the same to links. In `base`, Tailwind utilities win as they should, and unlayered components.css still wins exactly as before. */ @layer base { *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{color-scheme:dark} body{ font-family:var(--font-sans); font-size:var(--t-body); line-height:var(--lh-normal); color:var(--obsidian-100); background:var(--obsidian-950); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"ss01","ss02","cv11"; } /* The body's text, said again on its children (v5.3.0). A host that runs this page inside its own unlayered reset (a preview sandbox, a CMS theme, a docs shell) wins on body{color;font}, and everything that inherits took the host's dark serif text onto the --obsidian-950 ground (the headings of a landing page in v5.2.0, the whole site in the v5.3.0 render). A declaration on the children beats what they would inherit, from any layer, so the host keeps its body and loses nothing it styled itself. :where() keeps the rule at zero specificity: every element rule below and every component wins over it, and outside a host it says what the body says. */ :where(body > *){ color:var(--obsidian-100); font-family:var(--font-sans); font-size:var(--t-body); line-height:var(--lh-normal); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"ss01","ss02","cv11"; } img,svg{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} a{color:var(--primary-400);text-decoration:none;transition:color var(--d-quick) var(--ease-standard)} a:hover{color:var(--primary-300)} input,textarea{caret-color:var(--primary-500)} /* Single-typeface system: code, keys and samples ride the mono register (Satoshi + --tr-mono), never the browser's monospaced default (§ 02 Typography). */ code,kbd,samp,pre{font-family:var(--font-mono);letter-spacing:var(--tr-mono)} ::selection{background:var(--primary-500);color:var(--obsidian-050)} /* near-white token — #FFF is banned (§ 01.2) */ /* scrollbar */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--obsidian-700);border-radius:var(--r-sm);border:var(--bw-2) solid var(--obsidian-950)} ::-webkit-scrollbar-thumb:hover{background:var(--obsidian-600)} ::-webkit-scrollbar-corner{background:transparent} }