/** * IcosaQ Brand Identity Tokens & Public-Site Components * * Direction (BRAND-01): a deliberate departure from the old baseline * (Plus Jakarta Sans/Sora, white/navy/teal #28293f/#29d8cc, hard-shadow * buttons). This build uses a warm-paper ground, deep green + amber * accents, Fraunces display serif + Inter body, and soft-radius, no-shadow * buttons. * * BRAND-02: every colour, type-scale, and spacing value used on the public * site is defined ONCE here as a --iq-* custom property. Templates consume * tokens via var(--iq-*) only -- never a hardcoded hex/px value. Changing * the direction after review is a token edit in this block, not a rebuild. */ :root { /* Colour */ --iq-color-paper: #FAF7F2; --iq-color-ink: #26221C; --iq-color-ink-soft: #4A443B; --iq-color-primary: #175A47; --iq-color-primary-dark: #0F3F32; --iq-color-accent: #C4882F; --iq-color-accent-dark: #9C6B22; --iq-color-tint: #E4EBE6; --iq-color-border: #DDD6C9; --iq-color-paper-alt: #FFFFFF; /* Type */ --iq-font-display: "Fraunces", Georgia, "Times New Roman", serif; --iq-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --iq-text-sm: 0.875rem; --iq-text-base: 1rem; --iq-text-md: 1.125rem; --iq-text-lg: 1.375rem; --iq-text-xl: 1.75rem; --iq-text-2xl: 2.25rem; --iq-text-3xl: 3rem; /* Spacing */ --iq-space-1: 0.25rem; --iq-space-2: 0.5rem; --iq-space-3: 0.75rem; --iq-space-4: 1rem; --iq-space-5: 1.5rem; --iq-space-6: 2rem; --iq-space-7: 3rem; --iq-space-8: 4.5rem; /* Shape */ --iq-radius: 8px; --iq-radius-lg: 16px; --iq-max-width: 72rem; } /* --------------------------------------------------------------------- Base --------------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--iq-color-paper); color: var(--iq-color-ink); font-family: var(--iq-font-body); font-size: var(--iq-text-base); line-height: 1.6; } h1, h2, h3 { font-family: var(--iq-font-display); color: var(--iq-color-primary-dark); line-height: 1.15; margin: 0 0 var(--iq-space-4) 0; } a { color: var(--iq-color-primary); } img { max-width: 100%; display: block; } .iq-container { max-width: var(--iq-max-width); margin: 0 auto; padding: 0 var(--iq-space-5); } /* --------------------------------------------------------------------- Header / wordmark --------------------------------------------------------------------- */ /* :where() zeroes this rule's specificity to (0,0,0) -- deliberate. * ISSUE-04049: the report page lets an admin override the header's * background per-page through the Builder editor, which compiles that * choice into a plain single-class rule (.fb-xxxxxxxx { background-color: * ... }) injected into the page's BEFORE this stylesheet loads. * A same-specificity class selector here would win on source order * regardless of which page is more "specific" in intent, silently * defeating every such override (measured: verified live, the header * stayed white after publishing a new colour until this rule was * de-specified). Pages with no override keep exactly this default, * unchanged, because nothing else in the cascade then competes with it. */ :where(.iq-header) { background: var(--iq-color-paper-alt); border-bottom: 1px solid var(--iq-color-border); padding: var(--iq-space-4) 0; } .iq-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--iq-space-4); } .iq-wordmark { font-family: var(--iq-font-display); font-size: var(--iq-text-xl); font-weight: 600; color: var(--iq-color-primary-dark); text-decoration: none; letter-spacing: -0.01em; } .iq-wordmark__q { color: var(--iq-color-accent); } /* --------------------------------------------------------------------- Buttons -- soft radius, no hard shadow (a deliberate break from the old theme's hard-shadow buttons) --------------------------------------------------------------------- */ .iq-btn { display: inline-block; font-family: var(--iq-font-body); font-weight: 600; font-size: var(--iq-text-base); padding: var(--iq-space-3) var(--iq-space-5); border-radius: var(--iq-radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .iq-btn--primary { background: var(--iq-color-primary); color: var(--iq-color-paper-alt); } .iq-btn--primary:hover { background: var(--iq-color-primary-dark); } .iq-btn--accent { background: var(--iq-color-accent); color: var(--iq-color-paper-alt); } .iq-btn--accent:hover { background: var(--iq-color-accent-dark); } .iq-btn--outline { background: transparent; border-color: var(--iq-color-primary); color: var(--iq-color-primary); } /* --------------------------------------------------------------------- Sections --------------------------------------------------------------------- */ .iq-section { padding: var(--iq-space-8) 0; } .iq-section--tint { background: var(--iq-color-tint); } .iq-section--primary { background: var(--iq-color-primary); color: var(--iq-color-paper); } .iq-section--primary h2 { color: var(--iq-color-paper); } .iq-eyebrow { font-family: var(--iq-font-body); font-size: var(--iq-text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--iq-color-accent-dark); margin: 0 0 var(--iq-space-2) 0; } /* Hero */ .iq-hero { padding: var(--iq-space-8) 0 var(--iq-space-7) 0; text-align: center; } .iq-hero h1 { font-size: var(--iq-text-3xl); max-width: 44rem; margin-left: auto; margin-right: auto; } .iq-hero__strapline { font-size: var(--iq-text-md); color: var(--iq-color-ink-soft); max-width: 38rem; margin: 0 auto var(--iq-space-6) auto; } .iq-hero__actions { display: flex; justify-content: center; gap: var(--iq-space-4); flex-wrap: wrap; } /* Two-column pitch */ .iq-pitch-grid { display: grid; grid-template-columns: 1fr; gap: var(--iq-space-6); } @media (min-width: 768px) { .iq-pitch-grid { grid-template-columns: 1fr 1fr; } } .iq-pitch-card { background: var(--iq-color-paper-alt); border: 1px solid var(--iq-color-border); border-radius: var(--iq-radius-lg); padding: var(--iq-space-6); } .iq-pitch-card blockquote { font-family: var(--iq-font-display); font-style: italic; font-size: var(--iq-text-md); color: var(--iq-color-ink); margin: var(--iq-space-4) 0 0 0; padding-left: var(--iq-space-4); border-left: 3px solid var(--iq-color-accent); } /* Persona grid */ .iq-persona-grid { display: grid; grid-template-columns: 1fr; gap: var(--iq-space-5); } @media (min-width: 640px) { .iq-persona-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .iq-persona-grid { grid-template-columns: repeat(3, 1fr); } } .iq-persona-card { background: var(--iq-color-paper-alt); border: 1px solid var(--iq-color-border); border-radius: var(--iq-radius); padding: var(--iq-space-5); } .iq-persona-card h3 { font-size: var(--iq-text-md); margin-bottom: var(--iq-space-2); } .iq-persona-card blockquote { font-style: italic; color: var(--iq-color-ink-soft); margin: 0; font-size: var(--iq-text-sm); } /* Practitioner / mission banner */ .iq-banner { text-align: center; } .iq-banner blockquote { font-family: var(--iq-font-display); font-size: var(--iq-text-xl); font-style: italic; max-width: 46rem; margin: 0 auto; line-height: 1.4; } /* About */ .iq-about-grid { display: grid; grid-template-columns: 1fr; gap: var(--iq-space-6); } @media (min-width: 768px) { .iq-about-grid { grid-template-columns: 1fr 1fr; } } /* Contact */ .iq-contact-card { background: var(--iq-color-paper-alt); border: 1px dashed var(--iq-color-accent-dark); border-radius: var(--iq-radius-lg); padding: var(--iq-space-6); max-width: 34rem; margin: 0 auto; text-align: center; } .iq-placeholder-tag { display: inline-block; font-size: var(--iq-text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--iq-color-accent-dark); background: var(--iq-color-tint); border-radius: var(--iq-radius); padding: var(--iq-space-1) var(--iq-space-3); margin-bottom: var(--iq-space-3); } /* Footer */ .iq-footer { border-top: 1px solid var(--iq-color-border); padding: var(--iq-space-6) 0; text-align: center; color: var(--iq-color-ink-soft); font-size: var(--iq-text-sm); } /* --------------------------------------------------------------------- Questionnaire form (phase 7 -- QUES-04 layout fix) Root cause of ISSUE-03594: the renderer emitted `.iq-form-field`, `.iq-form-options`, `.iq-tile-grid`/`.iq-likert-row` and `.iq-hp-field` but none of these classes existed here, so labels/inputs fell back to browser default inline flow and the honeypot was fully visible. This block supplies every one of those rules. --------------------------------------------------------------------- */ #iq-questionnaire-form { max-width: 42rem; margin: 0 auto; width: 100%; } .iq-form-intro, .iq-form-required-notice { font-size: var(--iq-text-md); color: var(--iq-color-ink-soft); margin: 0 0 var(--iq-space-4) 0; } .iq-form-required-notice { font-size: var(--iq-text-sm); } .iq-form-field { display: block; width: 100%; margin: 0 0 var(--iq-space-6) 0; } .iq-form-field label { display: block; font-weight: 600; margin: 0; } /* Label + optional help question-mark, side by side (phase 21, PROP-00301). Wraps to a new line at narrow widths rather than squeezing the button against the text. */ .iq-field-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--iq-space-2); margin: 0 0 var(--iq-space-2) 0; } .iq-form-prompt { margin: 0 0 var(--iq-space-3) 0; color: var(--iq-color-ink-soft); } .iq-form-field input[type="text"], .iq-form-field input[type="number"], .iq-form-field input[type="email"], .iq-form-field select, .iq-form-field textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: var(--iq-space-3); font-family: var(--iq-font-body); font-size: var(--iq-text-base); border: 1px solid var(--iq-color-border); border-radius: var(--iq-radius); background: var(--iq-color-paper-alt); color: var(--iq-color-ink); } .iq-form-field textarea { resize: vertical; min-height: 6rem; } /* Divider between instrument sections -- more vertical space than the ordinary inter-question rhythm so sections read as visually distinct. */ .iq-divider { border: none; border-top: 1px solid var(--iq-color-border); margin: var(--iq-space-7) 0; } /* Stacked radio/checkbox option list (Life Goals I, Employment Status, ...) */ .iq-form-options { display: flex; flex-direction: column; gap: var(--iq-space-2); } .iq-form-options label { display: flex; align-items: flex-start; gap: var(--iq-space-2); font-weight: 400; margin: 0; } /* Colour-tile (4-col) and Likert-face (7-col) image grids. `--iq-grid-columns` is set inline per field; `minmax(0, 1fr)` keeps columns from forcing horizontal overflow at narrow (360px) viewports. */ .iq-tile-grid { display: grid; grid-template-columns: repeat(var(--iq-grid-columns, 4), minmax(0, 1fr)); gap: var(--iq-space-3); width: 100%; max-width: 100%; } .iq-tile-option { display: block; cursor: pointer; border: 2px solid transparent; border-radius: var(--iq-radius); padding: var(--iq-space-1); margin: 0; } .iq-tile-option img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: calc(var(--iq-radius) - 2px); } .iq-tile-option input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .iq-tile-option:has(input:checked) { border-color: var(--iq-color-accent); } .iq-form-field--image label { margin-bottom: var(--iq-space-2); } /* Anti-spam honeypot -- visually hidden from sighted visitors (not merely aria-hidden, which leaves the field visible on screen). Real users never see or reach it; bots that fill hidden form fields still find it. */ .iq-hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .iq-form-closing { text-align: center; color: var(--iq-color-ink-soft); font-size: var(--iq-text-sm); margin-top: var(--iq-space-7); } #iq-questionnaire-error { color: var(--iq-color-accent-dark); font-weight: 600; margin-bottom: var(--iq-space-4); } @media (max-width: 480px) { .iq-tile-grid { grid-template-columns: repeat(min(var(--iq-grid-columns, 4), 4), minmax(0, 1fr)); } } /* --------------------------------------------------------------------- Questionnaire tooltip help (phase 21 -- PROP-00301, scope D) The popup is an ordinary block in document flow -- never absolutely positioned over the form -- so opening it pushes the answer controls down instead of ever covering them, including at 360px. --------------------------------------------------------------------- */ .iq-help { display: inline-flex; } .iq-help-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid var(--iq-color-primary); border-radius: 50%; background: var(--iq-color-paper-alt); color: var(--iq-color-primary); font-family: var(--iq-font-body); font-size: var(--iq-text-sm); font-weight: 700; line-height: 1; cursor: pointer; } .iq-help-btn:hover, .iq-help-btn:focus-visible, .iq-help-btn[aria-expanded="true"] { background: var(--iq-color-primary); color: var(--iq-color-paper-alt); } .iq-help-popup { position: relative; max-width: 32rem; width: 100%; box-sizing: border-box; margin: 0 0 var(--iq-space-3) 0; padding: var(--iq-space-3) var(--iq-space-7) var(--iq-space-3) var(--iq-space-4); border: 1px solid var(--iq-color-border); border-radius: var(--iq-radius); background: var(--iq-color-tint); color: var(--iq-color-ink); font-size: var(--iq-text-sm); } .iq-help-popup-text, .iq-help-popup-more { margin: 0 0 var(--iq-space-2) 0; } .iq-help-popup-more { color: var(--iq-color-ink-soft); } .iq-help-popup-text:last-of-type, .iq-help-popup-more:last-of-type { margin-bottom: 0; } .iq-help-popup-close { position: absolute; top: var(--iq-space-2); right: var(--iq-space-2); width: 1.75rem; height: 1.75rem; border: none; background: transparent; color: var(--iq-color-ink-soft); font-size: var(--iq-text-lg); line-height: 1; cursor: pointer; } .iq-help-popup-close:hover, .iq-help-popup-close:focus-visible { color: var(--iq-color-ink); }