:root { /* ===== COLOR — BRAND CORE ===== */ /* Navy is the trust anchor: deep, cool, premium. Sampled from the SKYWAY wordmark + bridge towers. */ --sky-navy-900: #061539; /* deepest — body text on cream */ --sky-navy-800: #0E2148; /* PRIMARY navy — headlines, CTAs */ --sky-navy-700: #1A3160; /* hover-darker variant */ --sky-navy-500: #3A4F7A; /* muted secondary */ --sky-navy-300: #8A98B5; /* disabled-state ink */ --sky-navy-200: #C4CDDF; /* hairline divider on cream */ --sky-navy-100: #E2E7F0; /* faint surface tint */ --sky-navy-50: #EEF1F8; /* hover/selected background */ /* Teal is the bridge wave — connector, calm, used as a supporting accent. Never the dominant color. */ --sky-teal-700: #0C7A8E; --sky-teal-500: #1090A8; /* PRIMARY teal accent */ --sky-teal-300: #6FC3CF; --sky-teal-100: #D7ECEF; /* tinted info surface */ /* Gold = bridge cables. WARM accent, decorative only. Use sparingly — for an underline, an icon stroke, an award badge. Never for buttons or large surfaces. */ --sky-gold-600: #C99820; --sky-gold-500: #E0B143; /* PRIMARY gold accent */ --sky-gold-300: #F0D38C; --sky-gold-100: #FAEDC9; /* ===== COLOR — NEUTRALS (warm stone) ===== */ /* Page bg is a warm cream — NEVER pure white. Borrows the Apple-marketing warm-paper feel. */ --sky-cream: #F7F5F0; /* page canvas */ --sky-cream-lt: #FBFAF6; /* lifted sections nested on cream */ --sky-white: #FFFFFF; /* cards, modals, pop-ups */ --sky-stone-900: #161513; /* near-black ink */ --sky-stone-800: #2A2825; --sky-stone-700: #3F3D38; /* deep body text */ --sky-stone-500: #6B6862; /* secondary text */ --sky-stone-400: #94918A; /* tertiary / metadata */ --sky-stone-300: #B5B0A6; /* disabled text */ --sky-stone-200: #D9D5CC; /* hairline border */ --sky-stone-100: #ECE8DF; /* divider / chip bg */ /* ===== COLOR — SEMANTIC ===== */ --sky-success: #2F8F5C; --sky-success-bg:#E4F1EA; --sky-warning: #C97A1A; --sky-warning-bg:#FBEDD8; --sky-danger: #B43A2E; --sky-danger-bg: #F7E2DF; --sky-info: var(--sky-teal-500); --sky-info-bg: var(--sky-teal-100); /* ===== SEMANTIC SURFACE / TEXT ROLES ===== */ --bg: var(--sky-cream); --bg-lifted: var(--sky-cream-lt); --bg-card: var(--sky-white); --bg-inverse: var(--sky-navy-800); --fg: var(--sky-navy-900); --fg-muted: var(--sky-stone-700); --fg-subtle: var(--sky-stone-500); --fg-faint: var(--sky-stone-400); --fg-inverse: var(--sky-cream); --border: var(--sky-stone-200); --border-strong: var(--sky-stone-300); --border-focus: var(--sky-navy-800); --link: var(--sky-teal-700); /* ===== TYPOGRAPHY ===== */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale — Apple-marketing inspired, generous LH */ --fs-display: clamp(2.75rem, 5.5vw, 4.5rem); /* 44–72 */ --fs-h1: clamp(2.25rem, 4vw, 3.25rem); /* 36–52 */ --fs-h2: clamp(1.75rem, 3vw, 2.5rem); /* 28–40 */ --fs-h3: 1.5rem; /* 24 */ --fs-h4: 1.25rem; /* 20 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 */ --fs-body-sm: 0.9375rem; /* 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-eyebrow: 0.75rem; /* 12 */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --tr-tight: -0.025em; /* display & H1 */ --tr-snug: -0.015em; /* H2/H3 */ --tr-normal: 0; --tr-wide: 0.06em; --tr-eyebrow: 0.14em; /* uppercase eyebrow */ /* ===== SPACING (4px base) ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* Section rhythm — vertical breathing room between page sections */ --section-y-desktop: 120px; --section-y-tablet: 88px; --section-y-mobile: 64px; /* Page gutter */ --gutter-desktop: 64px; --gutter-tablet: 40px; --gutter-mobile: 20px; --content-max: 1240px; --content-narrow: 760px; /* ===== RADII ===== */ --r-xs: 4px; /* chips, tags */ --r-sm: 8px; /* small inputs */ --r-md: 12px; /* default card */ --r-lg: 16px; /* prominent card */ --r-xl: 24px; /* feature panels */ --r-2xl: 32px; /* hero frames */ --r-pill: 999px; /* buttons, pills */ /* ===== ELEVATION ===== */ /* Shadows are SOFT, low-opacity, warm-tinted. They sit on cream, so we tint with the navy axis at very low alpha. */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(14, 33, 72, 0.04), 0 1px 1px rgba(14, 33, 72, 0.03); --shadow-2: 0 4px 16px rgba(14, 33, 72, 0.06), 0 2px 4px rgba(14, 33, 72, 0.04); --shadow-3: 0 12px 32px rgba(14, 33, 72, 0.08), 0 4px 8px rgba(14, 33, 72, 0.04); --shadow-4: 0 24px 64px rgba(14, 33, 72, 0.12), 0 8px 16px rgba(14, 33, 72, 0.06); --shadow-focus: 0 0 0 3px rgba(16, 144, 168, 0.30); /* ===== MOTION ===== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; } /* ============================================================= BASE ELEMENT STYLES ============================================================= */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg); background: var(--bg); font-weight: 400; font-feature-settings: 'ss01' on, 'cv11' on; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--sky-navy-900); margin: 0; font-weight: 600; text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 600; } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); font-weight: 600; } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); font-weight: 600; } p { margin: 0; text-wrap: pretty; color: var(--fg-muted); line-height: var(--lh-relaxed); } a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--sky-teal-700); } small { font-size: var(--fs-caption); color: var(--fg-subtle); } /* Utility classes used across cards + UI kit */ .display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 500; color: var(--sky-navy-900); } .serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--sky-teal-700); } .lede { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-muted); } /* ============================================================= Skyway website kit — page-level layout & section styles. Component-internal styles live alongside their JSX. ============================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { background: var(--sky-cream); color: var(--fg); font-family: var(--font-sans); min-height: 100vh; } img { display: block; max-width: 100%; } button { font-family: inherit; } /* ===== container ===== */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter-desktop); } .container-narrow { max-width: var(--content-narrow); margin: 0 auto; padding: 0 var(--gutter-desktop); } @media (max-width: 900px) { .container, .container-narrow { padding: 0 var(--gutter-tablet); } } @media (max-width: 600px) { .container, .container-narrow { padding: 0 var(--gutter-mobile); } } /* ===== sections ===== */ section { padding-top: var(--section-y-desktop); padding-bottom: var(--section-y-desktop); } @media (max-width: 900px) { section { padding-top: var(--section-y-tablet); padding-bottom: var(--section-y-tablet); } } @media (max-width: 600px) { section { padding-top: var(--section-y-mobile); padding-bottom: var(--section-y-mobile); } } .section-lifted { background: var(--bg-lifted); } .section-navy { background: var(--sky-navy-800); color: var(--sky-cream); } .section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--sky-cream); } .section-navy p { color: rgba(247,245,240,0.78); } /* ===== shared header for sections ===== */ .section-head { max-width: 760px; margin: 0 auto var(--space-12); text-align: center; } .section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--sky-teal-700); margin-bottom: 18px; } .section-head .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--sky-gold-500); display: inline-block; } .section-head h2 { font-size: clamp(2rem, 3.6vw, 2.875rem); letter-spacing: -0.022em; font-weight: 500; line-height: 1.1; color: var(--sky-navy-900); margin-bottom: 16px; } .section-head .lede { font-size: 19px; line-height: 1.55; color: var(--fg-muted); max-width: 60ch; margin: 0 auto; } .section-navy .section-head .eyebrow { color: var(--sky-teal-300); } .section-navy .section-head .lede { color: rgba(247,245,240,0.7); } /* ===== buttons (reusable in the prototype) ===== */ .sk-btn { font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; border-radius: 999px; padding: 13px 24px; border: 1.5px solid transparent; cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); display: inline-flex; align-items: center; gap: 8px; line-height: 1; text-decoration: none; } .sk-btn.lg { font-size: 16px; padding: 15px 28px; } .sk-btn.sm { font-size: 13px; padding: 9px 17px; } .sk-btn.primary { background: var(--sky-navy-800); color: var(--sky-cream); } .sk-btn.primary:hover { background: var(--sky-navy-700); color: var(--sky-cream); } .sk-btn.secondary { background: var(--sky-white); color: var(--sky-navy-900); border-color: var(--sky-navy-200); } .sk-btn.secondary:hover { border-color: var(--sky-navy-800); color: var(--sky-navy-900); } .sk-btn.ghost { background: transparent; color: var(--sky-cream); border-color: rgba(247,245,240,0.30); } .sk-btn.ghost:hover { background: rgba(247,245,240,0.08); color: var(--sky-cream); } .sk-btn.teal { background: var(--sky-teal-500); color: var(--sky-white); } .sk-btn.teal:hover { background: var(--sky-teal-700); color: var(--sky-white); } .sk-btn.link { background: transparent; color: var(--sky-teal-700); padding: 0; border-radius: 0; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; } .sk-btn.link:hover { color: var(--sky-teal-700); opacity: 0.75; } /* ===== brand visuals reused across sections ===== */ .gold-rule { width: 60px; height: 2px; background: var(--sky-gold-500); border-radius: 999px; } /* shared signature wave (used in Hero footer + CTA banner) */ .skyway-wave { display: block; width: 100%; height: auto; pointer-events: none; }