/* ============================================================ Do Quantum - professional / consulting aesthetic Serif headlines (Source Serif 4) · sans body (Inter) · purple ============================================================ */ :root{ /* purple scale */ --purple-950:#1C1233; --purple-900:#241742; --purple-800:#2A1A52; --purple-700:#3A2670; --purple-600:#5A3FAA; /* brand */ --purple-500:#6E4CC8; /* accent / interactive */ --purple-300:#B6A6E6; --purple-200:#D2C7F0; --purple-100:#E9E2F8; --purple-50:#F5F2FC; /* neutrals */ --white:#FFFFFF; --paper:#FAF9FC; --ink:#1B1626; --heading:#281C45; /* dark aubergine, purple but professional */ --gray:#56505F; --gray-light:#8B8597; --line:#E9E5F1; --line-strong:#DAD3EA; --maxw:1180px; --header-h:74px; /* fixed-header height; refined at runtime by script.js */ --serif:"Source Serif 4", Georgia, "Times New Roman", serif; --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r:4px; --shadow-sm:0 1px 2px rgba(27,22,38,.06); --shadow:0 18px 48px -28px rgba(42,26,82,.45); color-scheme:light; } /* ---------- Dark theme ---------- JS sets data-theme on (saved choice or OS preference), so one block covers both auto and the toggle. Purple accents are lightened; neutrals flip. */ :root[data-theme="dark"]{ color-scheme:dark; --purple-700:#CBBBF7; --purple-600:#B59CF3; --purple-500:#A286EC; --purple-50:#1F1A37; --white:#15111E; --paper:#1C1730; --ink:#E8E3F2; --heading:#F5F1FD; --gray:#ABA3BD; --gray-light:#7C7490; --line:#2A2342; --line-strong:#3A3157; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 22px 50px -28px rgba(0,0,0,.75); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth; overflow-x:hidden; overscroll-behavior:none; scroll-padding-top:var(--header-h);} body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-top:var(--header-h); } h1,h2,h3,h4{font-family:var(--serif); margin:0; line-height:1.14; letter-spacing:-.012em; font-weight:600; color:var(--heading);} p{margin:0;} a{color:inherit; text-decoration:none;} /* subtle purple emphasis for select words */ .em{color:var(--purple-600); font-style:normal;} ul,ol,dl{margin:0; padding:0; list-style:none;} svg{display:block;} ::selection{background:var(--purple-200); color:var(--ink);} .container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:32px;} .skip-link{position:absolute; left:-999px; top:0; z-index:999; background:var(--purple-600); color:#fff; padding:10px 16px; border-radius:0 0 var(--r) 0;} .skip-link:focus{left:0;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-weight:600; font-size:.96rem; padding:13px 26px; border-radius:var(--r); border:1px solid transparent; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .btn-sm{padding:9px 18px; font-size:.9rem;} .btn-lg{padding:16px 32px; font-size:1.02rem;} .btn-primary{background:var(--purple-600); color:#fff;} .btn-primary:hover{background:var(--purple-700); transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(58,38,112,.7);} .btn-text{color:var(--purple-600); padding-inline:6px;} .btn-text span{transition:transform .2s ease; display:inline-block;} .btn-text:hover{color:var(--purple-700);} .btn-text:hover span{transform:translateX(4px);} .btn-light{background:#fff; color:var(--purple-800);} .btn-light:hover{background:var(--purple-50); transform:translateY(-1px);} .btn-outline-light{border-color:rgba(255,255,255,.4); color:#fff;} .btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08);} .btn:disabled,.btn[disabled],.btn.is-disabled{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; pointer-events:none;} /* ---------- Header ---------- */ .header{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,.86); backdrop-filter:blur(12px);} .scroll-progress{position:absolute; left:0; right:0; bottom:0; height:3px; overflow:hidden; pointer-events:none; z-index:1; transition:opacity .2s ease;} .scroll-progress-bar{display:block; height:100%; width:100%; background:var(--purple-600); transform:scaleX(0); transform-origin:left center;} .header-row{display:flex; align-items:center; justify-content:space-between; padding-block:18px;} .brand{display:inline-flex; align-items:center; gap:11px;} .brand-name{font-family:var(--serif); font-weight:700; font-size:1.28rem; letter-spacing:-.01em; color:var(--ink);} .brand-accent{color:var(--purple-700);} .brand-mark{display:block; width:34px; height:34px; border-radius:8px; object-fit:cover; box-shadow:0 1px 3px rgba(27,22,38,.18);} .footer-logo{display:inline-block; line-height:0; margin-bottom:4px;} .footer-logo img{display:block; width:208px; max-width:100%; height:auto;} .nav{display:flex; align-items:center; gap:8px;} .nav-menu{display:flex; align-items:center; gap:34px;} .nav-menu a{font-size:.96rem; font-weight:500; color:var(--gray); transition:color .2s;} .nav-menu a:not(.btn):hover,.nav-menu a:not(.btn).active{color:var(--purple-700);} .nav-cta a{color:#fff;} .nav-cta .btn{padding:10px 26px;} .theme-toggle{display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; background:none; cursor:pointer;} .theme-toggle:focus-visible{outline:2px solid var(--purple-500); outline-offset:3px; border-radius:999px;} .toggle-track{position:relative; display:flex; align-items:center; background:var(--line); border:1px solid var(--line-strong); border-radius:999px; padding:3px; transition:border-color .2s ease;} .theme-toggle:hover .toggle-track{border-color:var(--purple-300);} .toggle-thumb{position:absolute; left:3px; top:3px; width:26px; height:26px; border-radius:50%; background:var(--white); box-shadow:0 1px 4px rgba(27,22,38,.18); transition:transform .3s cubic-bezier(.4,0,.2,1); pointer-events:none;} :root[data-theme="dark"] .toggle-thumb{transform:translateX(26px); background:var(--line-strong); box-shadow:0 1px 6px rgba(0,0,0,.6);} .toggle-slot{width:26px; height:26px; display:flex; align-items:center; justify-content:center; position:relative; z-index:1;} .toggle-sun{color:var(--purple-600); transition:color .25s ease;} :root[data-theme="dark"] .toggle-sun{color:var(--gray-light);} .toggle-moon{color:var(--gray-light); transition:color .25s ease;} :root[data-theme="dark"] .toggle-moon{color:var(--purple-500);} .nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; z-index:110;} .nav-toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s;} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ---------- Hero ---------- */ .hero{padding:clamp(64px,10vh,110px) 0 0; position:relative; overflow:hidden;} .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-bottom:clamp(48px,8vh,84px);} .eyebrow{font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--purple-600); margin-bottom:24px;} .hero-title{font-size:clamp(2.6rem,5.4vw,4.3rem); font-weight:600; line-height:1.06; letter-spacing:-.02em;} .hero-sub{margin-top:26px; font-size:clamp(1.08rem,1.5vw,1.24rem); color:var(--gray); max-width:36ch;} .hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:38px;} .hero-note{margin-top:18px; font-size:.92rem; color:var(--gray);} .hero-note a{color:var(--purple-600); font-weight:500; border-bottom:1px solid var(--purple-200);} .hero-visual{display:flex; justify-content:center;} .orbits{width:100%; max-width:440px;} .cred-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-top:1px solid var(--line); padding-top:36px; padding-bottom:8px;} .cred-strip li{display:flex; flex-direction:column;} .cred-num{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.4vw,2.9rem); color:var(--purple-700); line-height:1;} .cred-label{margin-top:10px; font-size:.92rem; color:var(--gray); max-width:22ch;} .chapters-line{margin-top:26px; margin-bottom:clamp(24px,4vh,40px); font-size:.92rem; color:var(--gray); letter-spacing:.01em;} .chapters-line strong{color:var(--purple-700); font-weight:600;} /* ---------- Sections ---------- */ .section{padding:clamp(72px,11vh,128px) 0;} .section-alt{background:var(--paper); border-block:1px solid var(--line);} .section-head{max-width:760px; margin-bottom:60px;} .kicker{font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--purple-600); margin-bottom:18px;} .section-title{font-size:clamp(1.9rem,3.8vw,3rem); font-weight:600; line-height:1.12;} .lede{margin-top:22px; font-size:1.15rem; color:var(--gray); max-width:62ch;} /* three-column (premise / involved) */ .three-col{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);} .pillar,.invite{background:var(--white); padding:38px 32px;} .section-alt .pillar{background:var(--paper);} .pillar-ix{font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--purple-500);} .pillar h3{font-size:1.5rem; margin:14px 0 12px;} .pillar p{color:var(--gray);} .closing-line{font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,2rem); font-weight:500; color:var(--ink); margin-top:56px; text-align:center; padding-top:40px; border-top:1px solid var(--line);} /* invites */ .invite{display:flex; flex-direction:column;} .invite h3{font-size:1.5rem; margin-bottom:12px;} .invite p{color:var(--gray); flex:1;} .invite-note{flex:none; margin-top:12px; font-size:.85rem; color:var(--gray-light);} .arrow-link{margin-top:22px; font-weight:600; color:var(--purple-600); font-family:var(--sans); display:inline-flex; gap:8px;} .arrow-link span{transition:transform .2s ease;} .arrow-link:hover{color:var(--purple-700);} .arrow-link:hover span{transform:translateX(5px);} .arrow-link.is-disabled{color:var(--gray-light); cursor:default; pointer-events:none;} /* process steps */ .process{display:grid; gap:0; border-top:1px solid var(--line);} .step{display:grid; grid-template-columns:96px 1fr; gap:28px; padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline;} .step-num{font-family:var(--serif); font-weight:600; font-size:1.4rem; color:var(--purple-500);} .step-body h3{font-size:1.4rem; margin-bottom:8px;} .step-body p{color:var(--gray); max-width:60ch;} .step-body a{color:var(--purple-600); border-bottom:1px solid var(--purple-200); transition:border-color .2s;} .step-body a:hover{border-color:var(--purple-600);} /* tracks */ .track-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;} .track{background:var(--white); border:1px solid var(--line-strong); border-radius:6px; padding:clamp(32px,3.5vw,48px);} .track-num{font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--purple-500);} .track h3{font-size:1.85rem; margin:14px 0 16px;} .track p{color:var(--gray);} .track-modes{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;} .track-modes span{font-size:.82rem; font-weight:500; color:var(--purple-700); background:var(--purple-50); border:1px solid var(--purple-100); padding:7px 14px; border-radius:999px;} /* impact */ .impact-grid{display:grid; grid-template-columns:1fr; gap:8px;} .impact-points{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;} .impact-point{background:var(--white); padding:36px 30px;} .impact-stat{font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--purple-700); margin-bottom:14px; line-height:1.2;} .impact-stat .cred-num{font-size:1.7rem;} .impact-point p:last-child{color:var(--gray); font-size:.98rem;} .impact-desc{color:var(--gray); font-size:.98rem;} .paper-link{color:var(--purple-600); font-weight:600; white-space:nowrap;} .paper-link:hover{color:var(--purple-700);} .paper-link .arr{display:inline-block; transition:transform .2s ease; transform:rotate(-45deg);} .paper-link:hover .arr{transform:translate(2px,-2px) rotate(-45deg);} /* principles */ .principles{display:grid; grid-template-columns:repeat(2,1fr); gap:40px 56px; max-width:980px;} .principle{border-top:2px solid var(--purple-600); padding-top:22px;} .principle h3{font-size:1.35rem; margin-bottom:10px;} .principle p{color:var(--gray);} /* CTA band */ .cta{background:linear-gradient(160deg, var(--purple-800) 0%, var(--purple-950) 100%); color:#fff; padding:clamp(80px,13vh,140px) 0; text-align:center; position:relative; overflow:hidden;} .cta::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% -10%, rgba(110,76,200,.4), transparent 55%); pointer-events:none;} .cta-inner{position:relative;} .cta-kicker{font-size:.86rem; font-weight:500; letter-spacing:.04em; color:var(--purple-300); margin-bottom:24px;} .cta-title{font-size:clamp(2rem,4.5vw,3.4rem); font-weight:600; color:#fff; line-height:1.16;} .cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:40px;} .cta-note{margin-top:20px; font-size:.92rem; color:var(--purple-200);} /* Footer */ .footer{background:var(--purple-950); color:#fff; padding-top:72px;} .footer-grid{display:grid; grid-template-columns:1.5fr 2fr; gap:48px; padding-bottom:56px;} .footer .brand-name{color:#fff;} .footer-tag{color:var(--purple-200); margin-top:18px; max-width:40ch;} .footer-meta{color:#9a8fc0; font-size:.9rem; margin-top:14px;} .footer-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;} .footer-nav h4{font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:16px;} .footer-nav a{display:block; color:var(--purple-200); font-size:.96rem; padding:6px 0; transition:color .2s;} .footer-nav a:hover{color:#fff;} .footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:24px 32px; border-top:1px solid rgba(255,255,255,.12); color:#9a8fc0; font-size:.88rem;} /* Chapters */ .chapters-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} .chapter{background:var(--white); border:1px solid var(--line-strong); border-radius:6px; padding:32px 30px;} .chapter h3{font-size:2rem; color:var(--purple-700);} .chapter p{margin-top:8px; color:var(--gray); font-size:.96rem;} .elsewhere{margin-top:64px; border-top:1px solid var(--line); padding-top:52px;} .elsewhere-head{font-size:clamp(1.5rem,2.6vw,2rem);} .elsewhere-sub{margin-top:12px; color:var(--gray); font-size:1.08rem;} .path-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:34px;} .path{background:var(--white); border:1px solid var(--line-strong); border-radius:6px; padding:34px 32px; display:flex; flex-direction:column;} .path-feature{border-color:var(--purple-200); background:linear-gradient(180deg, var(--purple-50), var(--white)); box-shadow:var(--shadow);} .path-tag{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--purple-600);} .path h4{font-family:var(--serif); font-weight:600; font-size:1.4rem; margin:12px 0 12px;} .path p{color:var(--gray); flex:1;} .path .arrow-link{margin-top:22px;} /* Start a chapter (form) */ .start{background:var(--purple-50); border-block:1px solid var(--line);} .start-panel{background:var(--white); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow); padding:clamp(32px,4vw,56px); display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,4vw,56px); align-items:start;} .start-intro .section-title{font-size:clamp(1.7rem,3vw,2.4rem);} .start-intro .lede{font-size:1.05rem; margin-top:18px;} .chapter-form{display:grid; gap:18px;} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .field{display:flex; flex-direction:column; gap:7px; min-width:0;} .field label{font-size:.86rem; font-weight:600; color:var(--heading);} .field .optional{font-weight:400; color:var(--gray-light);} .field input,.field select,.field textarea{ font-family:var(--sans); font-size:.98rem; color:var(--ink); background:var(--white); border:1px solid var(--line-strong); border-radius:5px; padding:12px 14px; transition:border-color .2s ease, box-shadow .2s ease; width:100%; max-width:100%; min-width:0; } .field select{text-overflow:ellipsis;} .field textarea{resize:vertical; min-height:96px;} .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--purple-500); box-shadow:0 0 0 3px var(--purple-100);} .form-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px;} .form-note{font-size:.9rem; color:var(--gray);} .form-note a{color:var(--purple-600); border-bottom:1px solid var(--purple-200);} .form-confirm{margin-top:4px; font-size:.96rem; font-weight:500; color:var(--purple-700); background:var(--purple-50); border:1px solid var(--purple-100); border-radius:5px; padding:12px 14px;} .form-confirm.is-error{color:#9a1c2b; background:#fdf0f1; border-color:#f3d2d6;} /* Reveal */ .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);} .reveal.is-visible{opacity:1; transform:none;} /* ---------- Dark theme overrides (colors not driven by variables) ---------- */ :root[data-theme="dark"] .header{background:rgba(21,17,30,.85);} :root[data-theme="dark"] .skip-link, :root[data-theme="dark"] .btn-primary{background:#7C5AD6;} :root[data-theme="dark"] .btn-primary:hover{background:#9276E4;} :root[data-theme="dark"] ::selection{background:var(--purple-700); color:var(--white);} @media(max-width:900px){ :root[data-theme="dark"] .header, :root[data-theme="dark"] .nav-menu{background:#15111E;} } /* ---------- Responsive ---------- */ @media(max-width:920px){ .hero-grid{grid-template-columns:1fr; gap:36px;} .hero-visual{order:-1; max-width:360px; margin-inline:auto;} .cred-strip{grid-template-columns:repeat(2,1fr); gap:28px 24px;} .track-grid{grid-template-columns:1fr;} .impact-points{grid-template-columns:1fr;} .principles{grid-template-columns:1fr; gap:30px;} .three-col{grid-template-columns:1fr;} .path-grid{grid-template-columns:1fr;} .start-panel{grid-template-columns:1fr; gap:32px;} .footer-grid{grid-template-columns:1fr; gap:36px;} } /* Nav collapses to the drawer here so the wider menu never crowds the header. Dropping backdrop-filter is required: it would otherwise make .header the containing block for the fixed #navMenu drawer and collapse it to header height. */ @media(max-width:900px){ .header{background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;} .nav-toggle{display:flex;} .nav-menu{position:fixed; inset:0 0 0 auto; width:min(320px,86vw); flex-direction:column; align-items:flex-start; gap:6px; background:#fff; border-left:1px solid var(--line); padding:92px 30px 30px; transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); box-shadow:var(--shadow);} .nav-menu.open{transform:none;} .nav-menu li{width:100%;} .nav-menu a{display:block; padding:11px 0; font-size:1.05rem;} .nav-cta{margin-top:10px;} .nav-cta a{display:inline-flex;} } @media(max-width:600px){ body{font-size:16px;} /* When the hero actions stack, the borderless text link's 6px inset makes its text look indented vs. the filled button's left edge above it. Zero the left pad so the link text sits flush under the button edge. */ .hero-actions .btn-text{padding-left:0;} .cred-strip{grid-template-columns:1fr 1fr;} .chapters-trio{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .step{grid-template-columns:60px 1fr; gap:18px;} .footer-nav{grid-template-columns:1fr 1fr;} .footer-bottom{flex-direction:column;} } @media(max-width:480px){ .container{padding-inline:20px;} } /* ---------- Reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important;} .reveal{opacity:1; transform:none;} }