/* =========================================================================== 168 Institute coaching application. Tokens and the reset come from /assets/tokens.css. Nothing here redefines a token or hardcodes a brand colour. This page is the only one on the site that supports both themes; data-theme on drives it. =========================================================================== */ html{-webkit-text-size-adjust:100%} body{ background:var(--surface-page); color:var(--text-primary); font-family:var(--font-sans); padding-bottom:64px; } a{color:var(--text-link)} a:hover{color:var(--text-link-hover)} .wrap{max-width:840px;margin-inline:auto;padding:0 20px} .skip{ position:absolute;left:-9999px;top:0;z-index:80; font-family:var(--font-mono);font-size:13px;padding:12px 16px; background:var(--surface-card);color:var(--text-primary); border:1px solid var(--border-brand);border-radius:var(--radius-sm); } .skip:focus{left:12px;top:12px} .icon{flex:none;display:block} /* ---------------------------------------------------------------- header */ .top{ position:sticky;top:0;z-index:30; background:var(--surface-glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-subtle); } .top__row{ max-width:840px;margin-inline:auto; padding:12px 20px; display:flex;align-items:center;gap:16px; } .top__logo{height:24px;width:auto;display:block} /* The light lockup is for light backgrounds and vice versa. */ [data-theme="dark"] .top__logo--light{display:none} :root:not([data-theme="dark"]) .top__logo--dark{display:none} .prog{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0} .prog__row{ display:flex;justify-content:space-between;gap:12px; font-family:var(--font-mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--text-muted); } .prog__count{color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap} .prog__track{ height:6px;border-radius:999px; background:var(--surface-subtle);overflow:hidden; } .prog__fill{ height:100%;width:0; background:var(--gradient-labs); transition:width var(--dur-base) var(--ease-out); } .themebtn{ width:38px;height:38px;flex:none; display:inline-flex;align-items:center;justify-content:center; border-radius:var(--radius-md); border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-secondary); cursor:pointer; transition:var(--transition-control); } .themebtn:hover{background:var(--surface-sunken);color:var(--text-primary)} .themebtn:focus-visible{box-shadow:var(--focus-ring);border-color:var(--border-brand);outline:none} [data-theme="dark"] .themebtn .i-moon{display:none} :root:not([data-theme="dark"]) .themebtn .i-sun{display:none} /* ----------------------------------------------------------------- intro */ .intro{padding:56px 0 8px;display:flex;flex-direction:column;gap:18px} .intro__brand{ font-family:var(--font-display);font-weight:var(--weight-semibold); font-size:19px;letter-spacing:.06em;text-transform:uppercase; color:var(--text-brand); } .intro__h1{ font-family:var(--font-display);font-weight:var(--weight-semibold); font-size:clamp(34px,6vw,52px);line-height:1.06;letter-spacing:-.028em; color:var(--text-primary);margin:0; } .intro__body{ font-size:17px;line-height:1.65;color:var(--text-secondary); max-width:60ch;text-wrap:pretty; } /* ------------------------------------------------------------ first card */ .card{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); position:relative;overflow:hidden; } /* Accent is a 3px gradient bar across the top edge only. Never a left border. */ .card--accent::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:var(--gradient-labs); } .first{margin-top:24px;padding:24px;display:flex;flex-direction:column;gap:8px} .first__eyebrow{ font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--text-brand); } .first__lead{font-size:16px;line-height:1.6;color:var(--text-primary)} .first__note{font-size:13.5px;line-height:1.55;color:var(--text-muted)} /* -------------------------------------------------------------- sections */ .sec{padding:44px 0 0} .sec__head{display:flex;align-items:baseline;gap:12px;padding-bottom:6px;flex-wrap:wrap} .sec__kicker{ font-family:var(--font-mono);font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--text-faint); } .sec__title{ font-family:var(--font-display);font-weight:var(--weight-semibold); font-size:24px;letter-spacing:-.018em;color:var(--text-primary);margin:0; } .q{ display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px; padding:20px 0;border-top:1px solid var(--border-subtle); } .q__n{ font-family:var(--font-mono);font-size:12.5px;color:var(--text-faint); padding-top:2px;font-variant-numeric:tabular-nums; } .q__body{display:flex;flex-direction:column;gap:10px;min-width:0} .q__label{font-size:16px;font-weight:700;line-height:1.45;color:var(--text-primary)} /* No max-width and no text-wrap:pretty here on purpose. Both were tried and left orphaned words at this measure. */ .q__help{font-size:13.5px;line-height:1.55;color:var(--text-muted)} /* --------------------------------------------------------------- inputs */ .in{ width:100%; min-height:44px; padding:11px 14px; font-family:var(--font-sans);font-size:15px;line-height:1.5; color:var(--text-primary); background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md); transition:var(--transition-control); } .in::placeholder{color:var(--text-faint)} .in:hover{border-color:var(--border-strong)} .in:focus-visible,.in:focus{ outline:none;box-shadow:var(--focus-ring);border-color:var(--border-brand); } textarea.in{resize:vertical;min-height:112px} .in--inline{max-width:520px} /* ---------------------------------------------------------------- chips */ .chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px} .chip{ position:relative; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-primary); font-family:var(--font-sans);font-size:14.5px;font-weight:500; cursor:pointer; transition:var(--transition-control); } .chip:hover{background:var(--surface-sunken)} .chip:focus-visible{box-shadow:var(--focus-ring);outline:none} /* Selection is a soft brand wash plus an inset ring, cross-faded. Not a full-fill colour flip. */ .chip[aria-pressed="true"]{ background:var(--surface-brand-soft); box-shadow:inset 0 0 0 1.5px var(--border-brand); } .chip--num{ min-height:46px;width:46px;padding:0; border-radius:var(--radius-md); font-family:var(--font-mono);font-size:15px; font-variant-numeric:tabular-nums; } .scale{ display:flex;justify-content:space-between;max-width:520px; font-family:var(--font-mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--text-faint);padding-top:2px; } .other{display:none;flex-direction:column;gap:6px;padding-top:4px} .other[data-open="true"]{display:flex} .other__label{font-size:13.5px;color:var(--text-muted)} /* --------------------------------------------------------------- submit */ .send{ margin-top:48px; background:var(--ink-950); border-radius:var(--radius-lg); padding:28px; display:flex;flex-direction:column;gap:18px; box-shadow:var(--shadow-sm); } .send__head{display:flex;flex-direction:column;gap:8px} .send__eyebrow{ font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--violet-300); } .send__h2{ font-family:var(--font-display);font-weight:var(--weight-semibold); font-size:26px;letter-spacing:-.02em;color:var(--ink-0);margin:0; } .send__body{font-size:15px;line-height:1.6;color:var(--ink-300);max-width:58ch} .panel{padding:16px 18px;border-radius:var(--radius-md);display:none} .panel[data-on="true"]{display:block} .panel__title{ font-family:var(--font-display);font-weight:var(--weight-semibold); font-size:17px;color:var(--ink-0);margin-bottom:4px; } .panel__body{font-size:14px;line-height:1.55;color:var(--ink-300)} .panel--ok{background:rgba(18,165,148,.14);border:1px solid rgba(18,165,148,.42)} .panel--bad{background:rgba(217,48,67,.16);border:1px solid rgba(217,48,67,.45)} .btns{display:flex;flex-wrap:wrap;gap:10px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-display);font-weight:var(--weight-semibold); border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer;white-space:nowrap; transition:var(--transition-control); } .btn:focus-visible{box-shadow:var(--focus-ring);outline:none} .btn[disabled]{opacity:.7;cursor:default} .btn--lg{min-height:48px;padding:0 24px;font-size:16px} .btn--md{min-height:44px;padding:0 18px;font-size:14.5px} .btn--primary{background:var(--gradient-labs);color:var(--ink-0);box-shadow:var(--glow-violet)} .btn--primary:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn--primary:active{filter:brightness(.96);transform:scale(var(--press-scale))} .btn--inverse{background:rgba(255,255,255,.10);color:var(--ink-0)} .btn--inverse:hover{background:rgba(255,255,255,.18)} .btn--secondary{background:var(--ink-0);color:var(--ink-900)} .btn--secondary:hover{filter:brightness(.94)} /* Ghost buttons sit on the dark card, where the default ghost ink is unreadable. This override is deliberate. Do not remove it. */ .btn--ghost{ background:transparent; color:var(--ink-100); border:1px solid rgba(255,255,255,.22); } .btn--ghost:hover{background:rgba(255,255,255,.08)} .spin{ width:15px;height:15px;flex:none; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;border-radius:50%; animation:spin 700ms linear infinite;display:none; } .btn[data-sending="true"] .spin{display:block} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spin{animation-duration:2000ms}} .send__note{font-family:var(--font-mono);font-size:12px;color:var(--ink-400)} .preview{ width:100%;min-height:320px;box-sizing:border-box; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.28); color:var(--ink-100); font-family:var(--font-mono);font-size:12.5px;line-height:1.6; padding:14px;resize:vertical;display:none; } .preview[data-on="true"]{display:block} .preview:focus-visible{box-shadow:var(--focus-ring);outline:none} /* --------------------------------------------------------------- footer */ .foot{ padding:28px 0 0; display:flex;flex-wrap:wrap;gap:16px; justify-content:space-between;align-items:center; font-size:13px;color:var(--text-muted); } .foot__clear{ background:none;border:none;padding:6px 0; font-family:var(--font-sans);font-size:13px;color:var(--text-muted); text-decoration:underline;text-underline-offset:3px;cursor:pointer; transition:color var(--dur-fast) var(--ease-out); } .foot__clear:hover{color:var(--accent-danger)} .foot__clear:focus-visible{box-shadow:var(--focus-ring);outline:none} .foot__link{color:var(--text-muted);text-decoration:none} .foot__link:hover{color:var(--text-brand)} /* ---------------------------------------------------------------- toast */ .toast{ position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:60; display:flex;align-items:center;gap:8px; padding:10px 16px;border-radius:999px; background:var(--surface-inverse);color:var(--text-inverse); font-family:var(--font-mono);font-size:12px;letter-spacing:.06em; text-transform:uppercase; box-shadow:var(--shadow-lg); pointer-events:none; opacity:0;transition:opacity var(--dur-base) var(--ease-out); } .toast[data-on="true"]{opacity:1} /* Honeypot. Off-screen rather than display:none so bots still fill it. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ------------------------------------------------------------ responsive */ @media (max-width:600px){ .intro{padding-top:40px} .top__row{gap:12px} /* Keep the progress bar readable on small screens. */ .prog__label{display:none} .prog__row{justify-content:flex-end} .send{padding:22px} .btns .btn{flex:1 1 auto} } @media (max-width:380px){ .q{grid-template-columns:28px minmax(0,1fr);gap:10px} }