/* THE AI LOUNGE — SHARED STYLESHEET --------------------------------- Used by both content/flyer/flyer.html and content/website/index.html. BASE FONT / PROPORTIONAL SCALING --------------------------------- Every font size on both pages is a multiple of --font-base (see the font-scale tokens below). Each document sets its own --font-base by putting a "page-site" or "page-flyer" class on (and mirrored on for the background/color rules) — changing that one value rescales every font on that page together. No font-size should be hard-coded in px anywhere below this point; add a scale token instead. */ :root { /* Color tokens */ --color-bg: #0e1a2b; --color-page-bg: #ffffff; --color-accent: #ff9a3c; --color-accent-soft: rgba(255, 154, 60, 0.12); --color-accent-border: rgba(255, 154, 60, 0.3); --color-text: #ffffff; --color-muted: #7a9ab8; --color-muted-light: #8aaac0; --color-text-dim: #c8dce8; --color-line: rgba(255, 255, 255, 0.08); --color-rule: rgba(255, 255, 255, 0.1); --color-rule-soft: rgba(255, 255, 255, 0.08); /* Font families */ --font-family-body: 'DM Sans', system-ui, sans-serif; --font-family-display: 'Syne', system-ui, sans-serif; --font-family-invitation: 'Archivo Black', var(--font-family-body); /* Website font scale — every value below is proportional to --font-base */ --font-2xs: calc(var(--font-base) * 0.5625); /* 9px @ 16px base */ --font-xs: calc(var(--font-base) * 0.625); /* 10px @ 16px base */ --font-sm: calc(var(--font-base) * 0.6875); /* 11px @ 16px base */ --font-sm-md: calc(var(--font-base) * 0.75); /* 12px @ 16px base */ --font-md-sm: calc(var(--font-base) * 0.8125); /* 13px @ 16px base */ --font-md: calc(var(--font-base) * 0.875); /* 14px @ 16px base */ --font-md-lg: calc(var(--font-base) * 1.0); /* 16px @ 16px base — the reading-copy floor: equal to base, never below it */ --font-xl: calc(var(--font-base) * 1.25); /* 20px @ 16px base */ --font-lead-min: calc(var(--font-base) * 1.2); /* 19.2px @ 16px base */ --font-lead-max: calc(var(--font-base) * 1.9); /* 30.4px @ 16px base */ /* Flyer font scale — same anchor variable, print-tuned multipliers */ --flyer-font-xs: calc(var(--font-base) * 0.75); --flyer-font-sm: calc(var(--font-base) * 0.90); --flyer-font-md: calc(var(--font-base) * 1.00); --flyer-font-md-lg: calc(var(--font-base) * 1.25); --flyer-font-lg: calc(var(--font-base) * 1.5); --flyer-font-xl: calc(var(--font-base) * 2.25); --flyer-font-hero: calc(var(--font-base) * 4.75); /* Website layout */ --max: 1080px; --narrow: 720px; /* Flyer print layout */ --page-width: 8.5in; --page-height: 11in; --page-margin: 0.5in; --flyer-radius: 4px; --flyer-padding-top: 1.1rem; --flyer-padding-bottom: 2rem; --flyer-padding-inline: 2rem; --section-gap: 1.75rem; --hero-section-padding-bottom: .2rem; --section-gap-sm: 1.25rem; --content-indent: 1.25rem; } /* ── RESET ── */ * { box-sizing: border-box; margin: 0; padding: 0; } html.page-site { --font-base: 16px; font-size: var(--font-base); } html.page-flyer { --font-base: 18px; font-size: var(--font-base); } html { scroll-behavior: smooth; } body { font-family: var(--font-family-body); line-height: 1.6; } body.page-site { background: var(--color-bg); color: var(--color-text); } body.page-flyer { background: var(--color-page-bg); } a { color: inherit; text-decoration: none; } /* ========================================================= FLYER ========================================================= */ @page { size: letter; margin: 0; } .print-page { width: var(--page-width); height: var(--page-height); padding: var(--page-margin); background: var(--color-page-bg); } .event-flyer { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--flyer-padding-top) var(--flyer-padding-inline) var(--flyer-padding-bottom); overflow: hidden; border-radius: var(--flyer-radius); background: var(--color-bg); color: var(--color-text); } .event-flyer__accent { position: absolute; border-radius: 999px; pointer-events: none; } .event-flyer__accent--top { top: -3.75rem; right: -3.75rem; width: 13.75rem; height: 13.75rem; background: rgba(255, 160, 60, 0.12); } .event-flyer__accent--bottom { bottom: -5rem; left: -2.5rem; width: 16.25rem; height: 16.25rem; background: rgba(40, 160, 200, 0.08); } .flyer-section { position: relative; z-index: 1; } .flyer-rule { position: relative; z-index: 1; width: 100%; height: 1px; margin: 0 0 var(--section-gap) 0; border: 0; background: var(--color-rule); opacity: 0.7; } .flyer-rule--soft { margin-bottom: var(--section-gap-sm); background: var(--color-rule-soft); } .flyer-label { margin: 0; color: var(--color-accent); font-family: var(--font-family-body); font-size: var(--flyer-font-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .flyer-invitation__label { font-family: var(--font-family-invitation); font-size: var(--flyer-font-xl); font-weight: 800; line-height: 1; letter-spacing: 0.02em; text-transform: none; } .flyer-header { margin-bottom: var(--hero-section-padding-bottom); } .flyer-brand__eyebrow { margin: 0; color: var(--color-text-dim); font-family: var(--font-family-display); font-size: var(--flyer-font-md-lg); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: 0.11em; } .flyer-brand__location { color: var(--color-text-dim); font-family: var(--font-family-display); font-size: var(--flyer-font-sm); font-weight: 700; letter-spacing: 0.22em; text-transform: lowercase; } .flyer-brand__title { margin: 0 0 0.625rem 0; color: var(--color-text); font-family: var(--font-family-display); font-size: var(--flyer-font-hero); font-weight: 800; line-height: 1; } .flyer-brand__punctuation { color: var(--color-accent); } .flyer-brand__tagline { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 var(--section-gap) 0; color: var(--color-muted); font-family: var(--font-family-display); font-size: var(--flyer-font-sm); font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; } .flyer-brand__chat-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid rgba(255, 154, 60, 0.35); border-radius: 50%; color: var(--color-accent); font-family: var(--font-family-body); font-size: var(--flyer-font-md); line-height: 1; } .flyer-question { margin-bottom: var(--section-gap); } .flyer-question__text { margin: 0; padding-left: 1rem; border-left: 2px solid var(--color-accent); color: var(--color-text); font-family: var(--font-family-body); font-size: var(--flyer-font-lg); font-weight: 700; line-height: 1.3; } .flyer-invitation { margin-bottom: var(--section-gap); } .flyer-invitation__conversation-space { margin: 0 0 var(--section-gap) var(--content-indent); padding-top: 0.9rem; color: var(--color-muted-light); font-size: var(--flyer-font-md-lg); font-weight: 300; line-height: 1.3; } .flyer-invitation__emphasis { color: var(--color-text-dim); font-weight: 500; line-height: 1.3; } .flyer-principles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .flyer-principles__item { padding: 0.3125rem 0.625rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; background: rgba(255, 255, 255, 0.04); color: var(--color-muted); font-size: var(--flyer-font-md); letter-spacing: 0.03em; } .flyer-principles__item--accent { border-color: rgba(255, 154, 60, 0.4); background: rgba(255, 154, 60, 0.06); color: var(--color-accent); } .flyer-session { margin-bottom: var(--section-gap-sm); } .flyer-session__details { margin: 0.625rem 0 0 0; color: var(--color-text); font-size: var(--flyer-font-sm); line-height: 1.5; } .flyer-session__perk { margin: 0.9375rem 0 0 0; text-align: center; } .flyer-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; border: 1px solid rgba(255, 154, 60, 0.3); border-radius: 2px; background: rgba(255, 154, 60, 0.12); } .flyer-volume-badge { padding: 0.3em 0.3em; color: var(--color-accent); font-size: var(--flyer-font-xs); font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; } .flyer-footer__online { display: flex; align-items: center; gap: 0.5rem; padding: 0.3em 0.6em; } .flyer-footer__qr { width: 2.75rem; height: 2.75rem; border-radius: 2px; } .flyer-footer__link { color: var(--color-accent); font-family: var(--font-family-display); font-size: var(--flyer-font-sm); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; } @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ========================================================= WEBSITE ========================================================= */ .shell { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; } .shell-narrow { width: min(var(--narrow), calc(100% - 40px)); margin: 0 auto; } /* ── NAV ── */ nav { padding: 20px 0; border-bottom: 0.5px solid var(--color-line); position: sticky; top: 0; background: rgba(14, 26, 43, 0.95); backdrop-filter: blur(8px); z-index: 100; } .nav-inner { display: flex; align-items: center; gap: 32px; } .nav-links { display: flex; gap: 24px; margin-left: auto; } .nav-links a { font-size: var(--font-md-sm); color: var(--color-muted); letter-spacing: 0.3px; transition: color 0.15s; } .nav-links a:hover { color: var(--color-text); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: 2px; font-family: var(--font-family-body); font-size: var(--font-md-sm); font-weight: 500; cursor: pointer; transition: transform 0.15s, opacity 0.15s; white-space: nowrap; letter-spacing: 0.3px; } .btn:hover { transform: translateY(-1px); opacity: 0.92; } .btn-primary { background: var(--color-accent); color: var(--color-bg); border: none; } .btn-ghost { background: transparent; color: var(--color-accent); border: 0.5px solid var(--color-accent-border); } /* ── HERO ── */ .hero { padding: 0px 0 32px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; border-radius: 50%; background: rgba(255, 154, 60, 0.06); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -100px; left: -80px; width: 400px; height: 400px; border-radius: 50%; background: rgba(40, 160, 200, 0.04); pointer-events: none; } .hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-xs); font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; } .hero-tag::before { content: ''; width: 24px; height: 1px; background: var(--color-accent); } .hero-text-the, .hero-text-location { font-family: var(--font-family-display); font-size: var(--font-xl); font-weight: 400; font-style: italic; color: var(--color-muted); line-height: 1; margin-bottom: 0; letter-spacing: 2px; } .hero-text-ai, .hero-text-lounge { font-family: var(--font-family-display); font-weight: 800; line-height: 0.95; margin-bottom: 0; } .hero-text-ai { font-size: clamp(3.2rem, 7vw, 5.4rem); letter-spacing: 1px; } .hero-text-lounge { font-size: clamp(2.4rem, 5.8vw, 4.3rem); letter-spacing: 1px; } .hero-text-ai span { color: var(--color-accent); } .hero-text-lounge { padding-bottom: 10px; } .hero-text-location { display: inline; font-style: italic; margin-bottom: 0; padding-left: 15px; letter-spacing: 2px; } h1 { font-family: var(--font-family-display); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin-bottom: 8px; } h1 span { color: var(--color-accent); } .hero-sub { font-family: var(--font-family-display); font-size: var(--font-md-sm); font-weight: 400; color: var(--color-muted); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; } .hero-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 300; color: var(--color-muted-light); max-width: 540px; margin-bottom: 10px; margin-top: 10px; line-height: 1.75; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; margin-left: 20px; margin-bottom: 20px; } .quick-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 18px; } /* ── DIVIDER ── */ .section-divider { width: 100%; height: 0.5px; background: var(--color-line); margin: 5px 0; } /* ── QUESTION BANNER ── */ .question-banner { padding: 5px 0; border-left: 0 solid transparent; } .question-label { font-size: var(--font-2xs); font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; } .question-slideshow { position: relative; padding: 28px 32px; border-radius: 8px; background: rgba(255, 154, 60, 0.06); transition: background-color 0.4s ease; } .question-text { font-family: 'Sora', sans-serif; font-size: clamp(var(--font-lead-min), 2.5vw, var(--font-lead-max)); font-weight: 500; line-height: 1.4; max-width: 700px; border-left: 2px solid var(--color-accent); padding-left: 24px; transition: opacity 0.25s ease, border-color 0.4s ease; } .question-text.is-fading { opacity: 0; } .question-dots { display: flex; gap: 8px; margin-top: 18px; padding-left: 26px; } .question-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255, 255, 255, 0.15); cursor: pointer; transition: background 0.2s, transform 0.2s; } .question-dot:hover { background: rgba(255, 154, 60, 0.4); } .question-dot.is-active { background: var(--color-accent); transform: scale(1.2); } h2 { font-family: var(--font-family-display); font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; } .section-label { font-size: var(--font-sm); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; margin-top: 20px; } .section-intro { font-size: var(--font-md); color: var(--color-muted); margin-bottom: 10px; max-width: 480px; line-height: 1.7; } .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { background: rgba(255, 255, 255, 0.03); border: 0.5px solid var(--color-line); border-radius: 4px; padding: 20px; transition: border-color 0.2s; } .card:hover { border-color: var(--color-accent-border); } .card-num { font-family: var(--font-family-display); font-size: var(--font-sm); font-weight: 700; color: var(--color-accent); letter-spacing: 2px; margin-bottom: 5px; opacity: 0.7; } .card h3 { font-family: var(--font-family-display); font-size: var(--font-md-lg); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 5px; color: var(--color-text); } .card p { font-size: var(--font-md-lg); color: var(--color-muted); line-height: 1.65; font-weight: 300; } /* ── VOICES ── */ .voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 5px; } .voice-card { background: rgba(255, 255, 255, 0.03); border: 0.5px solid var(--color-line); border-radius: 4px; padding: 20px; } .voice-card blockquote { font-size: var(--font-md-sm); font-weight: 300; line-height: 1.7; color: var(--color-text-dim); font-style: italic; margin-bottom: 14px; } .voice-tag { font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: 2px; color: var(--color-accent); font-weight: 500; } .voices-invite { font-size: var(--font-md-sm); color: var(--color-muted); padding: 10px; } .voices-invite a { color: var(--color-accent); border-bottom: 0.5px solid var(--color-accent-border); padding-bottom: 1px; padding-left: 10px; } .conversation-context { font-size: clamp(1rem, 1.4vw, 1.12rem); font-weight: 300; color: var(--color-muted-light); line-height: 1.8; max-width: 680px; margin: 16px 0 18px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.06); } .conversation-context strong { color: var(--color-text-dim); font-weight: 500; } /* Desktop (default): 2 lines */ .line-group { display: block; } .part { display: inline; } .part-3 { display: block; } /* Mobile: 3 lines */ @media (max-width: 560px) { .part { display: block; } } /* ── NODE TAGS ── */ .node-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; } .node { padding: 5px 12px; border-radius: 2px; font-size: var(--font-sm); letter-spacing: 0.5px; border: 0.5px solid var(--color-line); color: var(--color-muted); background: rgba(255, 255, 255, 0.02); } .node.active { border-color: var(--color-accent-border); color: var(--color-accent); background: var(--color-accent-soft); } /* ── CTA ── */ .cta-section { padding: 30px 0; } .cta-box { background: rgba(255, 154, 60, 0.05); border: 0.5px solid var(--color-accent-border); border-radius: 4px; padding: 16px 15px; gap: 8px; display: grid; grid-template-columns: 1fr auto; align-items: center; } .cta-box h2 { margin-bottom: 8px; } .cta-box p { font-size: var(--font-md-sm); color: var(--color-muted); font-weight: 300; line-height: 1.7; } /* ── FOOTER ── */ body.page-site footer { margin-top: 24px; padding: 12px 0 28px; border-top: 1px solid rgba(255, 255, 255, 0.16); } .footer-inner { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-sm-md); color: var(--color-muted); } .footer-brand { display: flex; align-items: center; gap: 8px; } .footer-brand img { width: 20px; height: 20px; opacity: 0.7; } .vol-badge { background: var(--color-accent-soft); border: 0.5px solid var(--color-accent-border); border-radius: 2px; padding: 3px 10px; font-size: var(--font-2xs); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent); } .brand-node-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .brand-node { background: rgba(255, 255, 255, 0.04); border: 0.5px solid rgba(255, 255, 255, 0.1); border-radius: 2px; padding: 5px 10px; font-size: var(--font-md-lg); color: var(--color-muted); letter-spacing: 0.5px; } .brand-node.active { border-color: var(--color-accent-border); color: var(--color-accent); background: rgba(255, 154, 60, 0.06); } .brand-logo-sub { display: flex; align-items: center; justify-content: flex-start; gap: 8px; } .brand-logo-sub img { width: 32px; height: 32px; } .brand-logo-sub span { font-family: var(--font-family-display); font-size: var(--font-md-sm); font-weight: 400; color: var(--color-muted); letter-spacing: 4px; text-transform: uppercase; } .brand-body { font-size: var(--font-md-sm); font-weight: 300; color: var(--color-muted-light); line-height: 1.8; padding-top: 15px; margin-bottom: 28px; } .brand-body strong { color: var(--color-text-dim); font-weight: 500; } .brand-divider2 { width: 100%; height: 0.5px; background: var(--color-line); margin-bottom: 20px; } .voices-list { width: min(920px, 100%); display: grid; gap: 22px; } .voice-line { border-left: 2px solid rgba(255, 154, 60, 0.35); padding: 14px 18px; } .voice-line blockquote { font-size: var(--font-md-lg); font-weight: 300; line-height: 1.25; color: var(--color-muted); font-style: normal; margin-bottom: 0; } .voice-mood { display: block; margin-top: 4px; text-align: left; font-size: var(--font-xs); font-weight: 300; font-style: italic; letter-spacing: 0; color: var(--color-accent); } .voice-line span { display: block; margin-top: 4px; text-align: left; font-size: var(--font-2xs); letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent); font-style: italic; } .session-card { max-width: 720px; } .session-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .session-badge { font-size: var(--font-xs); letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; color: var(--color-accent); background: rgba(255, 154, 60, 0.06); border: 1px solid rgba(255, 154, 60, 0.22); } .session-details { display: grid; gap: 18px; } .session-item { display: grid; grid-template-columns: 90px 1fr; gap: 12px; } .session-key { font-size: var(--font-sm); letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); } .session-value { color: var(--color-text-dim); font-size: var(--font-md-lg); line-height: 1.6; } /* ── RESPONSIVE ── */ @media (max-width: 820px) { .cards-3, .voices-grid { grid-template-columns: repeat(2, 1fr); } .cta-box { grid-template-columns: 1fr; } .nav-links a { display: none; } } @media (max-width: 560px) { .cards-3, .voices-grid { grid-template-columns: 1fr; } .hero { padding: 48px 0 40px; } .hero-actions { flex-direction: column; } .btn { justify-content: center; } .cta-box { padding: 28px 24px; } .footer-inner { flex-direction: column; gap: 12px; align-items: flex-start; } /* "Lounge" + "at Frederick" have no space between them (spacing comes from padding), so the browser has no break point and the pair overflows the viewport instead of wrapping */ .hero-text-location { display: block; padding-left: 0; margin-top: 4px; } /* Mobile readability floor: body copy should never render smaller than --font-md-lg (16px @ 16px base — equal to the base itself, per the mobile-first reading-copy floor: the base font size IS the minimum readable size, so reading copy is never sized below it). --font-md-sm (card copy, blockquotes, cta/brand body text) and --font-md were the two scale steps landing below that floor, so both are raised to meet it here — one change instead of hunting down every class that used them. Labels/eyebrows/badges (--font-sm and smaller) are intentionally left alone; they're captions, not reading copy. */ :root { --font-md-sm: var(--font-md-lg); --font-md: var(--font-md-lg); } }