/* Career Readiness: primary site (high-end, Editorial Luxury structure). Palette: Ivory + Deep Navy. Type: Plus Jakarta Sans (display + body). The font is loaded via tags in index.html (preconnect + stylesheet) for faster FCP, not a CSS @import which blocks parallel loads. Signature moves: floating glass pill nav that hides on scroll-down, double-bezel cards, film grain, macro whitespace, blur-fade scroll reveals. Uses app.js (hooks: #header, .tab-btn, .track-panel, .reveal, [data-checkout]). The previous trust-first version is archived under archive/trust-first-version/. */ :root { --paper: #f6f4ef; --paper-2: #edeae1; --shell: #e9e6dd; --core: #fbfaf6; --ink: #1a1c22; --ink-2: #4c4f57cc; --ink-2-solid: #4c4f57; --ink-3: #8b8d94; --line: rgba(26, 28, 34, 0.10); --hair: rgba(26, 28, 34, 0.07); --accent: #1e3a5f; --accent-deep: #14293f; --accent-tint: rgba(30, 58, 95, 0.10); --accent-contrast: #fbfaf6; --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --spring: cubic-bezier(0.32, 0.72, 0, 1); --ease: cubic-bezier(0.16, 1, 0.3, 1); --maxw: 1180px; --r-xl: 2rem; --r-core: calc(2rem - 0.5rem); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Film grain overlay (fixed, non-scrolling, pointer-safe) */ body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ---------- Typography ---------- */ .display, .hero-title, .section-title, .track-card h3, .instructor h3, .final-cta h2, .modal-card h3, .price-main { font-family: var(--font-display); font-optical-sizing: auto; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); padding: 7px 14px; border-radius: 999px; } .eyebrow .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .section { padding: 128px 0; } .section-head { max-width: 660px; margin-bottom: 64px; } .section-title { font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.2rem); letter-spacing: -0.025em; line-height: 1.08; } .section-desc { margin-top: 20px; color: var(--ink-2-solid); font-size: 1.08rem; max-width: 58ch; } /* ---------- Double-bezel ---------- */ .bezel { background: var(--shell); border: 1px solid var(--hair); border-radius: var(--r-xl); padding: 8px; box-shadow: 0 40px 80px -40px rgba(28, 26, 22, 0.22); } .bezel-core { background: var(--core); border-radius: var(--r-core); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 0 0 1px var(--hair); height: 100%; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; line-height: 1; padding: 15px 30px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.4s var(--spring), background 0.4s var(--spring), box-shadow 0.4s var(--spring), color 0.4s var(--spring), border-color 0.4s var(--spring); } .btn:active { transform: scale(0.975); } .btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 55%, transparent); } .btn-primary:hover { background: var(--accent-deep); box-shadow: 0 20px 44px -14px color-mix(in srgb, var(--accent) 60%, transparent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-3); } .btn-lg { font-size: 1.02rem; padding: 17px 34px; } .btn-block { width: 100%; } /* ---------- Floating pill nav ---------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 22px 20px 0; will-change: transform; transition: transform 0.55s var(--spring), padding 0.5s var(--spring); } .header.scrolled { padding-top: 12px; } .header.nav-tucked { transform: translateY(-145%); } .header.menu-open { transform: none; } .nav { width: 100%; max-width: 980px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 12px 10px 24px; border-radius: 999px; background: color-mix(in srgb, var(--core) 72%, transparent); backdrop-filter: saturate(160%) blur(18px); border: 1px solid var(--hair); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 20px 40px -28px rgba(28, 26, 22, 0.4); transition: box-shadow 0.5s var(--spring), background 0.5s var(--spring); } .header.scrolled .nav { box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 26px 50px -26px rgba(28, 26, 22, 0.5); } .logo { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.02em; } .logo .accent { color: var(--accent); font-style: italic; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ink-2-solid); transition: color 0.2s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--ink); } /* ---------- Hero (editorial, text-forward) ---------- */ .hero { padding: 168px 0 88px; } .hero-inner { max-width: 960px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-title { font-weight: 800; font-size: clamp(2.9rem, 7vw, 5.2rem); letter-spacing: -0.04em; line-height: 1.0; margin: 26px 0 26px; max-width: 18ch; } .hero-title .em { font-style: italic; color: var(--accent); } .hero-sub { font-size: 1.2rem; color: var(--ink-2-solid); max-width: 56ch; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; justify-content: center; } .hero-note { margin-top: 22px; font-size: 0.9rem; color: var(--ink-3); } /* proof strip */ .proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 80px; } .proof-item { padding: 26px; } .proof-item .bezel-core { padding: 26px; } .proof-item .mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); margin-bottom: 18px; } .proof-item h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin-bottom: 8px; letter-spacing: -0.01em; } .proof-item p { font-size: 0.95rem; color: var(--ink-2-solid); } /* ---------- Tracks ---------- */ .track-help { font-size: 0.9rem; color: var(--ink-3); margin-bottom: 16px; font-weight: 500; } .track-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; } .tab-btn { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--ink-2-solid); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px; cursor: pointer; transition: all 0.4s var(--spring); } .tab-btn:hover { color: var(--ink); border-color: var(--ink-3); } .tab-btn.active { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 50%, transparent); } .track-panel { display: none; } .track-panel.active { display: block; } .track-card { padding: 12px; } .track-card .bezel-core { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; padding: 48px; } .track-role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); font-weight: 600; margin-bottom: 16px; } .track-card h3 { font-weight: 500; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 18px; } .track-card .lead { color: var(--ink-2-solid); margin-bottom: 28px; font-size: 1.05rem; } .build-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-3); margin-bottom: 14px; font-weight: 600; } .list-check { list-style: none; display: grid; gap: 13px; } .list-check li { position: relative; padding-left: 30px; color: var(--ink-2-solid); font-size: 0.98rem; } .list-check li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 999px; background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent); } .list-check li::after { content: ""; position: absolute; left: 6px; top: 11px; width: 6px; height: 3px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); } .track-side { align-self: start; background: var(--paper-2); border-radius: var(--r-core); padding: 30px; box-shadow: inset 0 0 0 1px var(--hair); } .track-side h5 { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-3); margin-bottom: 18px; font-weight: 600; } .tags { display: flex; flex-wrap: wrap; gap: 9px; } .tag { font-size: 0.82rem; font-weight: 600; color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 20%, #ffffff); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 999px; padding: 7px 14px; } /* ---------- Timeline ---------- */ .timeline { display: grid; gap: 14px; } .tl-step { padding: 8px; } .tl-step .bezel-core { display: grid; grid-template-columns: 240px 1fr; gap: 44px; padding: 36px 40px; } .tl-when { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: var(--accent); letter-spacing: -0.01em; font-style: italic; } .tl-when span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--ink-3); margin-top: 6px; letter-spacing: 0.02em; font-style: normal; } .tl-body h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; margin-bottom: 10px; letter-spacing: -0.01em; } .tl-body p { color: var(--ink-2-solid); max-width: 62ch; } /* ---------- Instructor ---------- */ .instructor { padding: 12px; } .instructor .bezel-core { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; padding: 48px; } .instructor-photo { border-radius: var(--r-core); overflow: hidden; aspect-ratio: 1; box-shadow: inset 0 0 0 1px var(--hair); } .instructor-photo img { width: 100%; height: 100%; object-fit: cover; } .instructor .who { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); font-weight: 600; } .instructor h3 { font-weight: 500; font-size: 2.1rem; letter-spacing: -0.02em; margin: 10px 0 12px; } .instructor p.bio { color: var(--ink-2-solid); margin: 0 0 26px; max-width: 58ch; font-size: 1.05rem; } /* ---------- Career-readiness core (pillars) ---------- */ .core .bezel-core { padding: 52px; } .pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; } .pillar { background: var(--paper-2); border-radius: var(--r-core); padding: 30px; box-shadow: inset 0 0 0 1px var(--hair); display: flex; gap: 18px; } .pillar .mark { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); } .pillar h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin-bottom: 8px; letter-spacing: -0.01em; } .pillar p { color: var(--ink-2-solid); font-size: 0.96rem; } .pillar.full { grid-column: 1 / -1; background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } /* ---------- Founding (bento) ---------- */ .founding { padding: 12px; } .founding .bezel-core { padding: 52px; } .founding-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .founding-item { background: var(--paper-2); border-radius: var(--r-core); padding: 30px; box-shadow: inset 0 0 0 1px var(--hair); } .founding-item .num { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent); font-size: 1.8rem; display: block; margin-bottom: 12px; } .founding-item h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin-bottom: 10px; letter-spacing: -0.01em; } .founding-item p { color: var(--ink-2-solid); font-size: 0.96rem; } /* ---------- Pricing ---------- */ .pricing-wrap { max-width: 620px; margin: 0 auto; padding: 12px; } .pricing-card .bezel-core { padding: 52px; } .price-tag { margin-bottom: 26px; } .price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; } .price-main { font-weight: 800; font-size: 3.6rem; letter-spacing: -0.04em; } .price-usd { color: var(--ink-3); font-weight: 500; } .price-note { color: var(--ink-2-solid); font-size: 0.98rem; margin-bottom: 32px; } .pricing-card .list-check { margin-bottom: 36px; } .pricing-fine { color: var(--ink-3); font-size: 0.86rem; margin-top: 16px; text-align: center; } .pricing-fine a { color: var(--accent); font-weight: 600; } .pricing-fine a:hover { text-decoration: underline; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 12px; max-width: 860px; } .faq-item { padding: 6px; } .faq-item .bezel-core { padding: 6px 26px; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; background: transparent; border: none; cursor: pointer; padding: 26px 4px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .faq-q .ico { flex: none; color: var(--accent); transition: transform 0.5s var(--spring); } .faq-item.open .faq-q .ico { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--spring); } .faq-a p { color: var(--ink-2-solid); padding: 0 4px 26px; max-width: 68ch; } /* ---------- Final CTA ---------- */ .final-cta { padding: 12px; } .final-cta .bezel-core { padding: 80px 48px; text-align: center; } .final-cta h2 { font-weight: 800; font-size: clamp(2.1rem, 4.8vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.06; } .final-cta p { color: var(--ink-2-solid); max-width: 50ch; margin: 20px auto 36px; font-size: 1.1rem; } .final-cta .btn { margin: 0 auto; } /* ---------- Footer ---------- */ .footer { padding: 72px 0; border-top: 1px solid var(--hair); } .footer-grid { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; } .footer .muted { color: var(--ink-3); font-size: 0.9rem; margin-top: 10px; max-width: 34ch; } .footer-links { display: flex; gap: 28px; } .footer-links a { color: var(--ink-2-solid); font-size: 0.9rem; } .footer-links a:hover { color: var(--ink); } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(20, 18, 14, 0.5); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 24px; } .modal-overlay.open { display: flex; } .modal-card { position: relative; width: 100%; max-width: 480px; padding: 10px; } .modal-card .bezel-core { padding: 40px; } .modal-card h3 { font-weight: 500; font-size: 1.7rem; letter-spacing: -0.02em; margin-bottom: 10px; } .modal-card .sub { color: var(--ink-2-solid); margin-bottom: 24px; } .modal-card .list-check { margin-bottom: 30px; } .close-btn { position: absolute; top: 18px; right: 18px; z-index: 2; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--core); color: var(--ink-2-solid); font-size: 1.3rem; line-height: 1; cursor: pointer; } .close-btn:hover { background: var(--paper-2); color: var(--ink); } .modal-help { text-align: center; font-size: 0.88rem; color: var(--ink-3); margin-top: 18px; } .modal-help a { color: var(--accent); font-weight: 600; } /* ---------- Reveal (blur-fade-up) ---------- */ .reveal { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); } .reveal.in { opacity: 1; transform: none; filter: none; } /* ---------- Responsive ---------- */ @media (max-width: 940px) { .proof { grid-template-columns: 1fr; } .track-card .bezel-core { grid-template-columns: 1fr; gap: 28px; padding: 32px; } .instructor .bezel-core { grid-template-columns: 1fr; gap: 28px; padding: 32px; } .instructor-photo { max-width: 220px; } .founding-grid { grid-template-columns: 1fr; } .pillars { grid-template-columns: 1fr; } .tl-step .bezel-core { grid-template-columns: 1fr; gap: 10px; padding: 28px; } } @media (max-width: 760px) { .nav-links { display: none; } .nav-cta .btn-desktop { display: none; } .nav-toggle { display: grid; place-items: center; } .header.menu-open .nav { flex-wrap: wrap; border-radius: 26px; } .header.menu-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 10px 12px 6px; border-top: 1px solid var(--hair); margin-top: 6px; } .header.menu-open .nav-links a { padding: 10px 0; width: 100%; } .hero { padding: 150px 0 72px; } .section { padding: 88px 0; } .container { padding: 0 20px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; filter: none; } body::after { display: none; } }