/* Shared stylesheet for the SCE Faculty Publications site (all three pages: landing.html, index.html, accessibility.html). This is the FIRST CSS file in the repo (Phase 1 shipped zero styling by design). Implements, per 02-UI-SPEC.md: - Color table (10 tokens) -> LAND-01, LAND-03, A11Y-06 - Spacing Scale (7 tokens) -> LAND-03 - Typography table (4 sizes / 2 weights) -> LAND-01 - Self-hosted Heebo variable webfont -> STACK.md (no Google Fonts CDN) - Dual-tone :focus-visible ring -> A11Y-05 - Landing page layout + responsiveness -> LAND-01, LAND-02, LAND-03 - Form page layout, radio group, ltr field overrides -> A11Y-01, A11Y-02, A11Y-05, A11Y-06 (02-02-PLAN.md) Logical properties (margin-inline-*, padding-inline-*, text-align: start) are used throughout this file. The three dir="ltr" field exceptions (#mobile, #publicationDate, #articleUrl) are the one deliberate physical text-align: right override -- see the rule near those selectors below for the rationale. */ @font-face { font-family: 'Heebo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/heebo-variable.woff2') format('woff2-variations'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } :root { /* Color tokens (02-UI-SPEC.md "Color" table) */ --color-teal-900: #0b5d63; --color-teal-600: #1a8996; --color-teal-300: #7fc6cc; --color-slate-teal-900: #123238; --color-slate-600: #4b5b5e; --color-neutral-900: #1a2226; --color-surface: #ffffff; --color-surface-muted: #f4f8f8; --color-error: #b3261e; --color-border-muted: #c9d3d4; /* Spacing tokens (02-UI-SPEC.md "Spacing Scale" table) */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; } *, *::before, *::after { box-sizing: border-box; } html { /* lang/dir are set per-page in each document's tag (A11Y-01). */ } body { margin: 0; font-family: 'Heebo', 'Segoe UI', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-neutral-900); background: var(--color-surface); } /* Typography roles (02-UI-SPEC.md "Typography" table) */ .text-label { font-size: 14px; font-weight: 400; line-height: 1.5; } .text-body { font-size: 16px; font-weight: 400; line-height: 1.5; } .text-heading { font-size: 24px; font-weight: 700; line-height: 1.2; } .text-display { font-size: 32px; font-weight: 700; line-height: 1.2; } /* Dual-tone visible focus indicator (A11Y-05). Applies globally to every focusable element on every page. Never remove this without an equivalent replacement -- never suppress the outline (set to `none`) without one. */ :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-teal-900); } /* -------------------------------------------------------------------- */ /* Landing page (site/landing.html) -- LAND-01, LAND-02, LAND-03 */ /* -------------------------------------------------------------------- */ .landing-header { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: 320px; padding-block: var(--space-2xl); padding-inline: var(--space-xl); background: linear-gradient(135deg, var(--color-teal-900), var(--color-teal-600)); overflow: hidden; } @media (max-width: 640px) { .landing-header { min-height: 240px; flex-direction: column; align-items: stretch; padding-block: var(--space-xl); padding-inline: var(--space-lg); } } .landing-header__hero { position: relative; z-index: 1; max-width: 32em; } .landing-header__hero .text-display { margin: 0; color: var(--color-surface); } .landing-logo-card { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; background: var(--color-surface); border-radius: 16px; padding: var(--space-md); } .landing-logo { display: block; inline-size: auto; block-size: auto; max-block-size: 72px; max-inline-size: 240px; } .landing-header__waves { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; line-height: 0; } .landing-header__waves svg { display: block; width: 100%; height: auto; } .landing-header__waves svg:first-child { position: absolute; inset-block-end: 0; inset-inline-start: 0; fill: var(--color-teal-300); opacity: 0.35; } .landing-header__waves svg:last-child { position: relative; fill: var(--color-surface); } .landing-main { padding-block: var(--space-2xl); padding-inline: var(--space-xl); max-width: 40em; margin-inline: auto; text-align: start; } @media (max-width: 640px) { .landing-main { padding-block: var(--space-xl); padding-inline: var(--space-lg); } } .landing-main .text-heading { margin-block: 0 var(--space-md); color: var(--color-slate-teal-900); } .landing-main .text-body { margin-block: 0 var(--space-xl); color: var(--color-slate-600); } .cta-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-block: var(--space-sm); padding-inline: var(--space-xl); border-radius: 8px; background: var(--color-teal-900); color: var(--color-surface); font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: none; } .landing-footer { padding-block: var(--space-lg); padding-inline: var(--space-xl); text-align: start; } .landing-footer a { color: var(--color-teal-900); } /* -------------------------------------------------------------------- */ /* Form page (site/index.html) -- A11Y-01, A11Y-02, A11Y-05, A11Y-06 */ /* -------------------------------------------------------------------- */ .form-page { max-width: 40em; margin-inline: auto; padding-block: var(--space-lg); padding-inline: var(--space-lg); background: var(--color-surface); } @media (min-width: 641px) { .form-page { padding-block: var(--space-xl); padding-inline: var(--space-xl); } } .form-page > h1 { margin-block: 0 var(--space-lg); color: var(--color-slate-teal-900); } .form-field { display: flex; flex-direction: column; gap: var(--space-sm); margin-block: var(--space-md); } .form-field label { font-size: 14px; font-weight: 400; line-height: 1.5; } .form-field input { font-size: 16px; font-weight: 400; line-height: 1.5; padding-block: var(--space-sm); padding-inline: var(--space-md); border: 1px solid var(--color-border-muted); border-radius: 8px; color: var(--color-neutral-900); background: var(--color-surface); text-align: start; } /* Deliberate physical override -- see 02-UI-SPEC.md "Why text-align: right" rationale. These three fields carry dir="ltr"; a logical `end` would resolve to the wrong (left) side on this RTL page. */ #mobile, #publicationDate, #articleUrl { text-align: right; } .field-hint { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--color-slate-600); margin: 0; } /* Non-color-only error indication (A11Y-03, FORM-10): the שגיאה:-prefixed text (authored in app.js via textContent) is the primary signal; the inline error icon below and the input/fieldset border rules further down are reinforcement only, never the sole means of conveying the error. */ .field-error { position: relative; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-error); margin: 0; padding-inline-start: 22px; } .field-error:not(:empty)::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.2em; width: 16px; height: 16px; background-color: var(--color-error); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm.75 11.5h-1.5v-1.5h1.5v1.5zm0-3h-1.5v-5h1.5v5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm.75 11.5h-1.5v-1.5h1.5v1.5zm0-3h-1.5v-5h1.5v5z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* Invalid single-input field (A11Y-03): border switches from --color-border-muted to a 2px --color-error border -- a reinforcement of the aria-invalid state, never the only signal (see .field-error above). */ input[aria-invalid="true"] { border: 2px solid var(--color-error); } /* Invalid ranking group (A11Y-03 group-level pattern): app.js toggles this class on #ranking-group instead of aria-invalid, which fieldsets do not support -- the border wraps all five options. */ #ranking-group.has-error { border: 2px solid var(--color-error); } #ranking-group { display: flex; flex-direction: column; gap: var(--space-sm); margin-block: var(--space-md); border: 1px solid var(--color-border-muted); border-radius: 8px; padding: var(--space-md); } #ranking-group legend { font-size: 16px; font-weight: 400; line-height: 1.5; padding-inline: var(--space-xs); } .radio-option { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; } #submit-button, #restart-button { display: inline-flex; align-items: center; justify-content: center; background: var(--color-teal-900); color: var(--color-surface); border: none; border-radius: 8px; padding-block: var(--space-sm); padding-inline: var(--space-xl); font-size: 16px; font-weight: 700; line-height: 1.5; cursor: pointer; } @media (max-width: 640px) { #submit-button, #restart-button { min-height: 44px; width: 100%; } } #thank-you-panel { max-width: 40em; margin-inline: auto; padding-block: var(--space-2xl); padding-inline: var(--space-xl); background: var(--color-surface-muted); text-align: start; } #thank-you-panel h2 { margin-block: 0 var(--space-md); font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--color-slate-teal-900); } #thank-you-panel p { margin-block: 0 var(--space-lg); color: var(--color-slate-600); } .form-footer { max-width: 40em; margin-inline: auto; padding-block: var(--space-lg); padding-inline: var(--space-lg); text-align: start; } @media (min-width: 641px) { .form-footer { padding-inline: var(--space-xl); } } .form-footer a { color: var(--color-teal-900); } /* -------------------------------------------------------------------- */ /* Accessibility statement page (site/accessibility.html) -- A11Y-07 */ /* -------------------------------------------------------------------- */ .statement-page { max-width: 40em; margin-inline: auto; padding-block: var(--space-2xl); padding-inline: var(--space-lg); background: var(--color-surface-muted); text-align: start; } @media (min-width: 641px) { .statement-page { padding-inline: var(--space-xl); } } .statement-page > h1 { margin-block: 0 var(--space-lg); color: var(--color-slate-teal-900); } .statement-page h2 { margin-block: var(--space-xl) var(--space-sm); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--color-slate-teal-900); } .statement-page p { margin-block: 0 var(--space-md); color: var(--color-slate-600); } .statement-page a { display: inline-block; margin-block-start: var(--space-lg); color: var(--color-teal-900); } /* --------------------------------------------------------------------- Multi-article form: shared fields stay above, then a repeatable list of .article-block cards (app.js clones #article-template). The ranking group here is class-based (.ranking-group) rather than the id-based #ranking-group the single-article Phase 2 form used, so its styling is duplicated below. --------------------------------------------------------------------- */ .articles-heading { margin-block: var(--space-lg) var(--space-sm); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--color-slate-teal-900); } .article-block { margin-block: var(--space-lg); padding: var(--space-md); border: 1px solid var(--color-border-muted); border-radius: 12px; background: var(--color-surface-muted); } .article-block__title { font-size: 16px; font-weight: 600; line-height: 1.5; padding-inline: var(--space-xs); color: var(--color-slate-teal-900); } /* Wrapped-label association for article fields: stack the label text (and the date hint) above the input, matching the shared fields' visual rhythm. */ .article-block .field-label { display: flex; flex-direction: column; gap: var(--space-sm); font-size: 14px; font-weight: 400; line-height: 1.5; } /* These two article inputs carry dir="ltr"; align them right on this RTL page, mirroring the id-based rule for the shared #mobile/#publicationDate fields. */ .js-publicationDate, .js-articleUrl { text-align: right; } .ranking-group { display: flex; flex-direction: column; gap: var(--space-sm); margin-block: var(--space-md); border: 1px solid var(--color-border-muted); border-radius: 8px; padding: var(--space-md); } .ranking-group.has-error { border: 2px solid var(--color-error); } .ranking-group legend { font-size: 16px; font-weight: 400; line-height: 1.5; padding-inline: var(--space-xs); } .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-block: var(--space-sm); padding-inline: var(--space-lg); border: 1px solid var(--color-teal-900); border-radius: 8px; background: var(--color-surface); color: var(--color-teal-900); font-size: 16px; font-weight: 400; cursor: pointer; } .secondary-button:disabled { opacity: 0.5; cursor: not-allowed; } .remove-article-button { display: inline-block; min-height: auto; margin-block-end: var(--space-md); padding-block: var(--space-xs); padding-inline: var(--space-md); font-size: 14px; } #add-article-button { margin-block: var(--space-sm) var(--space-lg); }