/* * cc-onestop-gallery.css — the One-Stop portal pages, in the gallery language. * * hackuniversity-index.html is drawn with cc-gallery.css: a white canvas, thin * oversized headings, hairline rules, mono labels, one accent stated once at the * top of the page. The four One-Stop pages were drawn with three different * skins instead — hu-editorial on the login page, cc-catalog-skin on the * register page, a Google-Sans card layout on the portal — so a member walked * through three visual identities to do one thing. * * This file puts all four on the index's design. It is a PRESENTATION layer and * nothing else: it re-styles the markup that is already there rather than * rewriting it, so no input name, hidden field, validation rule, Apps Script * endpoint or script is touched. Load it LAST in , after cc-gallery.css, * and mark the page's content wrapper: * *
* * Everything here is scoped under .cc-onestop, so the shared nav and the * per-org footer keep their own branding, exactly as on the index. */ /* ------------------------------------------------------------------ canvas */ .cc-onestop.gx { /* The nav (80px) and the clock subhead already reserve their own space via body padding + the subhead spacer, so the 5rem clearance cc-gallery gives a bare page would be counted twice here. */ padding-top: 0; background: var(--gx-paper); color: var(--gx-ink); font-family: var(--gx-font); -webkit-font-smoothing: antialiased; } /* The org's colour, stated once across the top of the page and nowhere else at this weight — the same single hairline the index carries. */ .cc-onestop.gx::before { content: ""; display: block; height: var(--gx-rule-h); background: var(--gx-rule); } .cc-onestop.gx section, .cc-onestop.gx header { background: var(--gx-paper); background-image: none; } /* The canvas is white everywhere, as it is on the org home page — not a white column floating on grey. Written with :has so it stays scoped to a page that actually carries .cc-onestop; a browser without :has simply keeps the old page colour, which is the pre-existing look and not a break. */ body:has(.cc-onestop.gx) { background: #ffffff; } /* No cards. The gallery separates with space and hairlines, never with a raised surface, so every rounded, shadowed, tinted panel inherited from the older skins flattens to the page. */ .cc-onestop.gx :is(section, article, div, details, summary, aside, li, a, button, input, select, textarea) { border-radius: 0; box-shadow: none; } .cc-onestop.gx :is(.hu-panel, .hu-steps, .card, .hu-card) { border: 0; border-top: 1px solid var(--gx-line); background: transparent; padding-left: 0; padding-right: 0; } .cc-onestop.gx .hu-panel { border-top: 2px solid var(--gx-accent); } /* ------------------------------------------------------------------- type */ /* The display size belongs to a hero headline of three or four words. The register page's h1 is a full sentence; at 6.5rem it broke over six lines and pushed the form itself below the fold, so it takes the section scale. */ .cc-onestop.gx h1 { font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: var(--gx-display-weight); line-height: 1.06; letter-spacing: -.035em; color: var(--gx-ink); margin: 0; } .cc-onestop.gx .hu-hero h1 { font-size: clamp(2.6rem, 7.5vw, 6.5rem); line-height: .96; letter-spacing: var(--gx-display-track); } /* The gallery sets everything ranged left; a centred headline over a left-ranged form reads as two different pages. */ .cc-onestop.gx :is(h1, h2) { text-align: left; } .cc-onestop.gx #done :is(h1, h2, p) { text-align: center; } /* The index sets the second half of a headline in grey rather than in the accent — the accent is the rule at the top, and is not repeated in type. */ .cc-onestop.gx h1 em { font-style: normal; color: var(--gx-muted); } .cc-onestop.gx h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: var(--gx-display-weight); line-height: 1.06; letter-spacing: -.035em; color: var(--gx-ink); } .cc-onestop.gx h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--gx-ink); } /* Labels, step numbers and eyebrows go mono — the one thing that marks a page as Hack University's rather than any other org's in the set. */ .cc-onestop.gx :is(.hu-kicker, .hu-meta .l, .hu-step .num, .gx-kicker, .step-eyebrow) { font-family: var(--gx-font-kicker); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gx-muted); } .cc-onestop.gx .hu-meta .n { font-weight: 200; letter-spacing: -.03em; color: var(--gx-ink); } .cc-onestop.gx :is(p, li) { color: var(--gx-muted); line-height: 1.7; } .cc-onestop.gx .hu-hero-sub { margin-top: clamp(1.75rem, 3vw, 2.5rem); } .cc-onestop.gx :is(.hu-hero-sub, .hu-lead) { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: var(--gx-lead-weight); line-height: 1.6; color: var(--gx-muted); max-width: 46ch; } /* --------------------------------------------------------------- hairlines */ .cc-onestop.gx :is(.hu-hero, .hu-rule, hr) { border-color: var(--gx-line); } .cc-onestop.gx hr { border: 0; border-top: 1px solid var(--gx-line); } /* ----------------------------------------------------------------- actions */ /* One action reads as the action; the rest are quiet links. The accent sits under the button at rest (so it is visible on a phone, where there is no hover) and the fill on hover is ink, not accent — #1a73e8 under white text does not clear 4.5:1. */ .cc-onestop.gx :is(.hu-cta, .btn, .hu-btn, button[type="submit"], #submit, #next, #prev) { display: inline-flex; align-items: center; gap: .6em; background: transparent; color: var(--gx-ink); font-size: .9rem; font-weight: 400; letter-spacing: 0; padding: .85rem 1.6rem; border: 0; border-bottom: 2px solid var(--gx-accent); border-radius: 0; text-decoration: none; transition: background .18s, color .18s; } .cc-onestop.gx :is(.hu-cta, .btn, .hu-btn, button[type="submit"], #submit, #next, #prev):hover { background: var(--gx-ink); color: var(--gx-paper); } .cc-onestop.gx :is(.hu-cta--ghost, #prev) { border-bottom-color: var(--gx-line); } /* The register page still carries cc-catalog-skin, the re-skin the gallery layer now supersedes. It repaints Tailwind's blue/green utilities with !important, so its filled pill buttons survive everything above. Undo it for buttons only — amber, red and green text keep their colour, because there they carry meaning (a warning, an error, a save that worked) rather than decoration. */ .cc-onestop.gx :is(button, a):is(.bg-blue-600, .bg-green-600), .cc-onestop.gx :is(button#next, button#prev, button#submit) { background-color: transparent !important; color: var(--gx-ink) !important; border-radius: 0 !important; font-weight: 400 !important; } .cc-onestop.gx :is(button, a):is(.bg-blue-600, .bg-green-600):hover, .cc-onestop.gx :is(button#next, button#prev, button#submit):hover { background-color: var(--gx-ink) !important; color: var(--gx-paper) !important; } .cc-onestop.gx :is(button, a):is(.bg-blue-600, .bg-green-600):disabled, .cc-onestop.gx :is(button#next, button#prev, button#submit):disabled { background-color: transparent !important; color: var(--gx-ink) !important; } /* The "Signed in as" strip and the inline help boxes become hairline notes. */ .cc-onestop.gx :is(.bg-blue-50, .help-box) { background-color: transparent !important; border: 0 !important; border-left: 2px solid var(--gx-accent) !important; border-radius: 0 !important; padding-left: 1rem !important; } .cc-onestop.gx :is(.hu-cta, .btn, .hu-btn, button, #submit):disabled, .cc-onestop.gx :is(.hu-cta, .btn, .hu-btn, button, #submit)[disabled] { opacity: .45; background: transparent; color: var(--gx-ink); cursor: not-allowed; } .cc-onestop.gx :is(.hu-note, .hu-fine) a, .cc-onestop.gx p a { color: var(--gx-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--gx-line); transition: text-decoration-color .18s; } .cc-onestop.gx p a:hover { text-decoration-color: var(--gx-accent); } /* ------------------------------------------------------------------- forms */ /* The register form is the one place in the set with a lot of controls. They get the same hairline treatment as everything else: square, unfilled, one rule, and ink — not accent — on focus, so the accent stays stated once per page. Size and spacing are unchanged; only the surface is. */ .cc-onestop.gx .field label, .cc-onestop.gx label { font-family: var(--gx-font-kicker); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gx-muted); } .cc-onestop.gx .req::after { color: var(--gx-accent); } .cc-onestop.gx :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], input:not([type]), select, textarea) { background: transparent; border: 0; border-bottom: 1px solid var(--gx-line); border-radius: 0; padding: .55rem 0; font-family: var(--gx-font); font-size: 1rem; font-weight: 400; color: var(--gx-ink); transition: border-color .18s; } .cc-onestop.gx :is(input, select, textarea):focus { outline: 0; border-bottom-color: var(--gx-ink); border-bottom-width: 2px; padding-bottom: calc(.55rem - 1px); } .cc-onestop.gx :is(input, select, textarea)::placeholder { color: #b9bec6; } /* intl-tel-input draws its own flag dropdown inside the field; keep it on the same baseline instead of letting it re-introduce a box. */ .cc-onestop.gx .iti__selected-flag { background: transparent; } /* Checkboxes and radios stay square and ink, not accent-filled. */ .cc-onestop.gx :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--gx-ink); border-radius: 0; } .cc-onestop.gx .chk { color: var(--gx-muted); font-size: .9rem; } .cc-onestop.gx .chk label, .cc-onestop.gx .chk span { font-family: var(--gx-font); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--gx-muted); } /* Step tabs read as a catalogue index, not as pills. */ .cc-onestop.gx #step-tabs button { font-family: var(--gx-font-kicker); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--gx-muted); border: 0; border-bottom: 1px solid var(--gx-line); border-radius: 0; padding: .45rem .25rem; } .cc-onestop.gx #step-tabs button[aria-selected="true"] { color: var(--gx-ink); border-bottom: 2px solid var(--gx-accent); } .cc-onestop.gx #step-tabs button:disabled { color: #c7ccd3; } .cc-onestop.gx #bar { background: var(--gx-ink); } /* ------------------------------------------------------------- reveal, motion */ /* The index fades sections in on scroll; the login page already ships the same idea under its own class name. Keep one behaviour, and respect the OS setting. */ @media (prefers-reduced-motion: reduce) { .cc-onestop.gx *, .cc-onestop.gx .hu-reveal { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } } /* ------------------------------------------------------------- responsive */ @media (max-width: 860px) { .cc-onestop.gx :is(.hu-split, .gx-split) { grid-template-columns: minmax(0, 1fr); } } /* At phone width the mono tracking is wide enough to break "PARTNER ORGANIZATIONS" across a line and leave a single S below it. Tighten the label tracking rather than shrinking the number it labels. */ @media (max-width: 520px) { .cc-onestop.gx :is(.hu-meta .l, .hu-kicker) { letter-spacing: .08em; } .cc-onestop.gx .hu-meta { gap: 1.25rem 1.5rem; } }