/* ============================================================ Apple Design Language — drop-in tokens + base styles Extracted from apple.com (August 2026). Apple's own system is namespaced --sk-*; those names are preserved here. Usage: (or ap--dark) Fonts: Apple does not license SF Pro for third-party web use. The stack below resolves to real SF Pro on Apple hardware and falls back to Inter/Helvetica elsewhere. To load Inter: ============================================================ */ :root { /* ---- Font stacks: the optical-size split is load-bearing ---- */ --ap-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --ap-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Display >= 19px, Text <= 17px. Never mix them up. */ /* ---- Weights: only two ---- */ --ap-weight-headline: 600; --ap-weight-regular: 400; /* ---- Layout constants ---- */ --ap-nav-height: 44px; --ap-tile-height: 580px; /* --hero-content-height */ --ap-tile-gap: 12px; /* the only gutter on the page */ --ap-max-width-nav: 1024px; --ap-max-width-footer: 980px; --ap-max-width-copy: 570px; --ap-side-padding: 22px; /* ---- Tile padding (large viewport; overrides below) ---- */ --ap-tile-pad-top: 48px; --ap-tile-pad-bottom: 56px; /* ---- Radius: pills for actions, square for everything else ---- */ --ap-radius-pill: 980px; --ap-radius-block: 8px; /* .button-block only */ --ap-radius-small: 5px; --ap-radius-none: 0px; /* ---- Type scale (large viewport) — size / line-height / tracking ---- */ --ap-tile-headline-size: 56px; --ap-tile-headline-lh: 1.07143; --ap-tile-headline-ls: -0.005em; --ap-headline-size: 48px; --ap-headline-lh: 1.08349; --ap-headline-ls: -0.002em; --ap-promo-headline-size: 40px; --ap-promo-headline-lh: 1.1; --ap-promo-headline-ls: 0em; --ap-callout-size: 32px; --ap-callout-lh: 1.125; --ap-callout-ls: 0.002em; --ap-tile-subhead-size: 28px; --ap-tile-subhead-lh: 1.14286; --ap-tile-subhead-ls: 0.007em; --ap-promo-subhead-size: 21px; --ap-promo-subhead-lh: 1.19048; --ap-promo-subhead-ls: 0.011em; --ap-tile-callout-size: 19px; --ap-tile-callout-lh: 1.21053; --ap-tile-callout-ls: 0.012em; --ap-body-size: 17px; --ap-body-lh: 1.47059; --ap-body-ls: -0.022em; --ap-body-reduced-size: 14px; --ap-body-reduced-lh: 1.42859; --ap-body-reduced-ls: -0.016em; --ap-caption-size: 12px; --ap-caption-lh: 1.33337; --ap-caption-ls: -0.01em; /* Tracking crosses zero at 40px going down, then flips negative again once the face switches to Text at 17px. Never use a global value. */ /* ---- Text rhythm ---- */ --sk-default-stacked-margin: 0.4em; --sk-headline-plus-headline-margin: 0.4em; --sk-headline-plus-first-element-margin: 0.8em; --sk-paragraph-plus-element-margin: 0.8em; --sk-paragraph-plus-headline-margin: 1.6em; --ap-headline-to-subhead: 6px; --ap-copy-to-cta: 17px; --ap-cta-gap: 17px; /* ---- Motion ---- */ --ap-ease: cubic-bezier(0.4, 0, 0.6, 1); /* signature, 161 uses */ --ap-ease-move: cubic-bezier(0.25, 0.1, 0.3, 1); --ap-duration-fast: 0.24s; --ap-duration: 0.3s; --ap-duration-nav: 0.32s; /* ---- Buttons ---- */ --sk-button-border-radius: 980px; --sk-button-border-width: 1px; --sk-button-padding-vertical: 9px; --sk-button-padding-horizontal: 16px; --sk-button-min-width-basis: 60px; /* ---- Focus ---- */ --sk-focus-color: #0071e3; --sk-focus-offset: 1px; --sk-focus-offset-container: 3px; --sk-link-disabled-opacity: 0.42; /* ---- Brand extras (theme-independent) ---- */ --sk-productred: #af1e2d; --sk-enviro-green: #00d959; --sk-enviro-neutral: #e8e8ed; } /* ---- Responsive: tile padding + type scale steps down ---- */ @media (min-width: 1069px) and (min-height: 776px) { :root { --ap-tile-pad-top: 56px; --ap-tile-pad-bottom: 63px; } } @media (max-width: 1068px) { :root { --ap-tile-pad-top: 54px; --ap-tile-pad-bottom: 61px; --ap-tile-headline-size: 48px; --ap-tile-headline-lh: 1.08349; --ap-tile-headline-ls: -0.002em; --ap-headline-size: 40px; --ap-headline-lh: 1.1; --ap-headline-ls: 0em; --ap-promo-headline-size: 32px; --ap-promo-headline-lh: 1.125; --ap-promo-headline-ls: 0.002em; --ap-callout-size: 28px; --ap-callout-lh: 1.14286; --ap-callout-ls: 0.007em; --ap-tile-subhead-size: 24px; --ap-tile-subhead-lh: 1.16667; --ap-tile-subhead-ls: 0.009em; --ap-promo-subhead-size: 19px; --ap-promo-subhead-lh: 1.21053; --ap-promo-subhead-ls: 0.012em; /* tile-callout crosses the optical threshold into SF Pro Text here */ --ap-tile-callout-size: 17px; --ap-tile-callout-lh: 1.23536; --ap-tile-callout-ls: -0.022em; } } @media (min-width: 735px) and (max-width: 1068px) and (min-height: 734px) { :root { --ap-tile-pad-top: 61px; --ap-tile-pad-bottom: 69px; } } @media (max-width: 734px) { :root { --ap-tile-pad-top: 39px; --ap-tile-pad-bottom: 43px; --ap-tile-headline-size: 32px; --ap-tile-headline-lh: 1.125; --ap-tile-headline-ls: 0.002em; --ap-headline-size: 32px; --ap-headline-lh: 1.125; --ap-headline-ls: 0.002em; --ap-callout-size: 24px; --ap-callout-lh: 1.16667; --ap-callout-ls: 0.009em; --ap-tile-subhead-size: 19px; --ap-tile-subhead-lh: 1.21053; --ap-tile-subhead-ls: 0.012em; --ap-tile-callout-size: 14px; --ap-tile-callout-lh: 1.28577; --ap-tile-callout-ls: -0.016em; } } /* ============================================================ Themes — applied per tile, not just per page ============================================================ */ .ap, .ap--light, .theme-light { --sk-body-background-color: #ffffff; --sk-body-text-color: #1d1d1f; --sk-headline-text-color: #1d1d1f; --sk-body-link-color: #0066cc; --sk-glyph: #000000; --sk-glyph-gray: #1d1d1f; --sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88); --sk-glyph-gray-secondary: #6e6e73; --sk-glyph-gray-secondary-alpha: rgba(0, 0, 0, 0.56); --sk-glyph-gray-secondary-alt: #424245; --sk-glyph-gray-secondary-alt-alpha: rgba(0, 0, 0, 0.72); --sk-glyph-gray-tertiary: #86868b; --sk-glyph-gray-tertiary-alpha: rgba(0, 0, 0, 0.48); --sk-glyph-blue: #0066cc; --sk-glyph-orange: #b64400; --sk-glyph-green: #008009; --sk-glyph-red: #e30000; --sk-fill: #ffffff; --sk-fill-secondary: #fafafc; --sk-fill-tertiary: #f5f5f7; /* the Apple grey */ --sk-fill-gray: #1d1d1f; --sk-fill-gray-secondary: #86868b; --sk-fill-gray-tertiary: #d2d2d7; --sk-fill-gray-quaternary: #e8e8ed; --sk-fill-blue: #0071e3; --sk-fill-blue-hover: #0076df; --sk-fill-blue-active: #006edb; --sk-fill-orange: #f56300; --sk-fill-orange-secondary: #fff9f4; --sk-fill-green: #03a10e; --sk-fill-green-secondary: #f5fff6; --sk-fill-red: #e30000; --sk-fill-red-secondary: #fff2f4; --sk-fill-yellow: #ffe045; --sk-fill-yellow-secondary: #fffef2; } .ap--dark, .theme-dark { --sk-body-background-color: #000000; --sk-body-text-color: #f5f5f7; --sk-headline-text-color: #f5f5f7; --sk-body-link-color: #2997ff; --sk-link-disabled-opacity: 0.36; --sk-glyph: #ffffff; --sk-glyph-gray: #f5f5f7; --sk-glyph-gray-alpha: rgba(255, 255, 255, 0.92); --sk-glyph-gray-secondary: #86868b; --sk-glyph-gray-secondary-alpha: rgba(255, 255, 255, 0.56); --sk-glyph-gray-secondary-alt: #d2d2d7; --sk-glyph-gray-secondary-alt-alpha: rgba(255, 255, 255, 0.8); --sk-glyph-gray-tertiary: #6e6e73; --sk-glyph-gray-tertiary-alpha: rgba(255, 255, 255, 0.4); --sk-glyph-blue: #2997ff; --sk-glyph-orange: #ff791b; --sk-glyph-red: #ff3037; --sk-fill: #000000; --sk-fill-secondary: #161617; --sk-fill-tertiary: #1d1d1f; --sk-fill-gray: #f5f5f7; --sk-fill-gray-secondary: #6e6e73; --sk-fill-gray-tertiary: #424245; --sk-fill-gray-quaternary: #333336; /* NOTE: --sk-fill-blue is deliberately NOT inverted — the primary button stays #0071e3 on black (verified via .button-dark/.button-light) */ --sk-fill-red: #ff3037; --sk-fill-red-secondary: #330000; --sk-fill-yellow: #ad8200; --sk-fill-yellow-secondary: #2b2000; --sk-fill-orange-secondary: #290d00; --sk-fill-green-secondary: #002b03; } /* ============================================================ Base ============================================================ */ .ap { font-family: var(--ap-font-text); font-size: var(--ap-body-size); line-height: var(--ap-body-lh); letter-spacing: var(--ap-body-ls); font-weight: var(--ap-weight-regular); color: var(--sk-body-text-color); background-color: var(--sk-body-background-color); -webkit-font-smoothing: antialiased; margin: 0; } .ap h1, .ap h2, .ap h3, .ap h4, .ap p { margin: 0; } /* Generic links. Declared before the components so component classes (.button, .globalnav-link, .globalfooter a) always win the cascade. */ .ap a { color: var(--sk-body-link-color); text-decoration: none; } .ap a:hover { text-decoration: underline; } /* ---- Typography utilities: apply alongside the semantic class ---- */ .typography-tile-headline { font-family: var(--ap-font-display); font-size: var(--ap-tile-headline-size); line-height: var(--ap-tile-headline-lh); letter-spacing: var(--ap-tile-headline-ls); font-weight: var(--ap-weight-headline); } .typography-headline { font-family: var(--ap-font-display); font-size: var(--ap-headline-size); line-height: var(--ap-headline-lh); letter-spacing: var(--ap-headline-ls); font-weight: var(--ap-weight-headline); } .typography-promo-headline { font-family: var(--ap-font-display); font-size: var(--ap-promo-headline-size); line-height: var(--ap-promo-headline-lh); letter-spacing: var(--ap-promo-headline-ls); font-weight: var(--ap-weight-headline); } .typography-callout { font-family: var(--ap-font-display); font-size: var(--ap-callout-size); line-height: var(--ap-callout-lh); letter-spacing: var(--ap-callout-ls); font-weight: var(--ap-weight-headline); } .typography-tile-subhead { font-family: var(--ap-font-display); font-size: var(--ap-tile-subhead-size); line-height: var(--ap-tile-subhead-lh); letter-spacing: var(--ap-tile-subhead-ls); font-weight: var(--ap-weight-regular); } .typography-promo-subhead { font-family: var(--ap-font-display); font-size: var(--ap-promo-subhead-size); line-height: var(--ap-promo-subhead-lh); letter-spacing: var(--ap-promo-subhead-ls); font-weight: var(--ap-weight-regular); } .typography-tile-callout { /* Display at 19px, Text at 17px and below — the media queries above swap the size; the family swap is handled here at the same threshold. */ font-family: var(--ap-font-display); font-size: var(--ap-tile-callout-size); line-height: var(--ap-tile-callout-lh); letter-spacing: var(--ap-tile-callout-ls); font-weight: var(--ap-weight-regular); } @media (max-width: 1068px) { .typography-tile-callout { font-family: var(--ap-font-text); } } .typography-body-reduced { font-family: var(--ap-font-text); font-size: var(--ap-body-reduced-size); line-height: var(--ap-body-reduced-lh); letter-spacing: var(--ap-body-reduced-ls); font-weight: var(--ap-weight-regular); } .typography-caption { font-family: var(--ap-font-text); font-size: var(--ap-caption-size); line-height: var(--ap-caption-lh); letter-spacing: var(--ap-caption-ls); font-weight: var(--ap-weight-regular); } /* ---- Buttons: pills, two sizes that matter, one blue ---- */ .button, .ap .button { display: inline-block; font-family: var(--ap-font-text); font-size: var(--ap-body-reduced-size); line-height: 1.28577; letter-spacing: -0.016em; font-weight: var(--ap-weight-regular); text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; border-radius: var(--sk-button-border-radius); border: var(--sk-button-border-width) solid var(--sk-button-border-color, transparent); padding: var(--sk-button-padding-vertical) var(--sk-button-padding-horizontal); min-width: calc(var(--sk-button-min-width-basis) - var(--sk-button-padding-horizontal) * 2); background-color: var(--sk-button-background, var(--sk-fill-blue)); color: var(--sk-button-color, #fff); transition: background-color var(--ap-duration-fast) var(--ap-ease), color var(--ap-duration-fast) var(--ap-ease); } .ap .button:hover { background-color: var(--sk-button-background-hover, var(--sk-fill-blue-hover)); color: var(--sk-button-color-hover, var(--sk-button-color, #fff)); text-decoration: none; } .ap .button:active { background-color: var(--sk-button-background-active, var(--sk-fill-blue-active)); } .ap .button:focus-visible { outline: 2px solid var(--sk-focus-color); outline-offset: var(--sk-focus-offset); } .button-reduced { --sk-button-padding-vertical: 4px; --sk-button-padding-horizontal: 11px; --sk-button-min-width-basis: 45px; font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; } .button-elevated { --sk-button-padding-vertical: 12px; --sk-button-padding-horizontal: 22px; --sk-button-min-width-basis: 70px; font-size: 17px; line-height: 1.17648; letter-spacing: -0.022em; } .button-super { --sk-button-padding-vertical: 18px; --sk-button-padding-horizontal: 31px; --sk-button-min-width-basis: 90px; font-size: 17px; line-height: 1.17648; letter-spacing: -0.022em; } .button-secondary { --sk-button-background: transparent; --sk-button-background-hover: var(--sk-fill-blue-hover, #0076df); --sk-button-background-active: var(--sk-fill-blue-active, #006edb); --sk-button-color: var(--sk-glyph-blue); --sk-button-color-hover: #ffffff; --sk-button-border-color: var(--sk-glyph-blue); } .button-neutral { --sk-button-background: var(--sk-fill-gray); --sk-button-background-hover: #272729; --sk-button-background-active: #18181a; --sk-button-color: var(--sk-fill); } .button-block { border-radius: var(--ap-radius-block); display: block; width: 100%; } /* ---- Tiles: the core layout unit ---- */ .section { display: grid; grid-template-columns: 1fr; gap: var(--ap-tile-gap); margin-bottom: var(--ap-tile-gap); } .section--2up { grid-template-columns: 1fr 1fr; } @media (max-width: 734px) { .section--2up { grid-template-columns: 1fr; } } .tile-wrapper { position: relative; width: 100%; min-height: var(--ap-tile-height); padding: var(--ap-tile-pad-top) 0 var(--ap-tile-pad-bottom); background-color: var(--sk-fill-tertiary); color: var(--sk-body-text-color); overflow: clip; border-radius: var(--ap-radius-none); /* never round a tile */ } .tile-wrapper.theme-dark { background-color: var(--sk-fill); } .tile-content { width: 100%; max-width: var(--ap-max-width-copy); margin: 0 auto; padding: 0 var(--ap-side-padding); text-align: center; } .tile-headline { color: var(--sk-headline-text-color); } .tile-subhead { margin-top: var(--ap-headline-to-subhead); color: var(--sk-body-text-color); } .tile-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ap-cta-gap); margin-top: var(--ap-copy-to-cta); } .tile-image-wrapper { margin-top: 24px; } .tile-image-wrapper img { display: block; width: 100%; height: auto; border-radius: 0; object-fit: cover; } /* Whole-tile link overlay */ .tile-link { position: absolute; inset: 0; z-index: 1; } .tile-content, .tile-ctas { position: relative; z-index: 2; } /* ---- Global nav: frosted ---- */ .globalnav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--ap-nav-height); background-color: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); } .ap--dark .globalnav, .globalnav.theme-dark { background-color: rgba(22, 22, 23, 0.8); } .globalnav-content { max-width: var(--ap-max-width-nav); margin: 0 auto; padding: 0 var(--ap-side-padding); height: 100%; display: flex; align-items: center; justify-content: space-between; } .globalnav-link, .ap .globalnav-link { font-family: var(--ap-font-text); font-size: var(--ap-body-size); letter-spacing: var(--ap-body-ls); font-weight: var(--ap-weight-regular); color: rgba(0, 0, 0, 0.8); text-decoration: none; transition: color var(--ap-duration-nav) var(--ap-ease); } .ap--dark .globalnav-link, .globalnav.theme-dark .globalnav-link { color: rgba(255, 255, 255, 0.8); } .ap .globalnav-link:hover { color: var(--sk-glyph-gray); text-decoration: none; } /* ---- Footer ---- */ .globalfooter { background-color: var(--sk-fill-tertiary); font-family: var(--ap-font-text); font-size: var(--ap-caption-size); line-height: var(--ap-caption-lh); letter-spacing: var(--ap-caption-ls); color: var(--sk-glyph-gray-secondary-alpha); } .globalfooter-content { max-width: var(--ap-max-width-footer); margin: 0 auto; padding: 37px var(--ap-side-padding) 11px; } .ap .globalfooter a { color: var(--sk-glyph-gray-secondary-alt-alpha); text-decoration: none; } .ap .globalfooter a:hover { text-decoration: underline; } /* ---- Fine print ---- */ .sosumi { font-size: var(--ap-caption-size); line-height: var(--ap-caption-lh); color: var(--sk-glyph-gray-secondary-alpha); }