490 lines
9.6 KiB
CSS
490 lines
9.6 KiB
CSS
/* Generated by scripts/preview-styles.mjs; edit src/styles/global.css. */
|
||
|
||
/* ==========================================================================
|
||
CTAO Science Portal: content page mockup
|
||
Colours and type follow the CTAO Brand Guidelines (April 2024).
|
||
The editor preview (public/admin/preview.css) is generated from the
|
||
hero, prose and button sections below by scripts/preview-styles.mjs.
|
||
========================================================================== */
|
||
|
||
/* Fonts
|
||
========================================================================== */
|
||
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-weight: 400 700;
|
||
font-display: swap;
|
||
src: url("/assets/fonts/inter-latin.woff2") format("woff2");
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Space Grotesk";
|
||
font-weight: 500 700;
|
||
font-display: swap;
|
||
src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
|
||
}
|
||
|
||
/* Tokens
|
||
========================================================================== */
|
||
|
||
:root {
|
||
/* Brand main colours (D.2.1) */
|
||
--galaxy-blue: #00004a;
|
||
--cherenkov-blue: #00e4d8;
|
||
--moon-gray: #f5f5f5;
|
||
|
||
/* Brand secondary colours (D.2.2) */
|
||
--white: #ffffff;
|
||
--cosmic-azure: #007aff;
|
||
--interstellar-indigo: #00009c;
|
||
|
||
/* Text */
|
||
--text: #111111;
|
||
--text-muted: #555555;
|
||
/* Cosmic Azure at 84% brightness: 5.4:1 on white, 3.5:1 against body text */
|
||
--link: #0066d6;
|
||
|
||
/* Type: Inter for everything, Space Grotesk for headlines (D.3) */
|
||
--font-body: "Inter", Arial, sans-serif;
|
||
--font-head: "Space Grotesk", Arial, sans-serif;
|
||
|
||
/* Layout */
|
||
--content-width: 85rem;
|
||
--gutter: clamp(1rem, 4vw, 2.5rem);
|
||
--header-height: 7rem;
|
||
--header-height-scrolled: 5rem;
|
||
--radius-lg: 60px;
|
||
--radius-md: 30px;
|
||
--radius-sm: 15px;
|
||
/* Dropdown submenus (Example, language) */
|
||
--radius-menu: 8px;
|
||
--transition: 0.3s ease-in-out;
|
||
|
||
/* Film grain tile over the hero background, also hides gradient banding */
|
||
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
/* Base
|
||
========================================================================== */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-padding-top: var(--header-height-scrolled);
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-body);
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
color: var(--text);
|
||
background: var(--white);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
body.no-scroll {
|
||
overflow: hidden;
|
||
}
|
||
|
||
img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
a {
|
||
color: var(--link);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover,
|
||
a:focus-visible {
|
||
text-decoration: underline;
|
||
text-underline-offset: 0.15em;
|
||
}
|
||
|
||
button {
|
||
padding: 0;
|
||
font: inherit;
|
||
color: inherit;
|
||
background: none;
|
||
border: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Focus ring: Link blue on light backgrounds, Cherenkov Blue on dark ones */
|
||
:focus-visible {
|
||
outline: 2px solid var(--link);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
.site-header :focus-visible,
|
||
.page-hero :focus-visible,
|
||
.site-footer :focus-visible {
|
||
outline-color: var(--cherenkov-blue);
|
||
}
|
||
|
||
/* Utilities
|
||
========================================================================== */
|
||
|
||
.container {
|
||
width: min(100% - 2 * var(--gutter), var(--content-width));
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.visually-hidden {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
.skip-link {
|
||
position: absolute;
|
||
top: -4rem;
|
||
left: 1rem;
|
||
z-index: 100;
|
||
padding: 0.5rem 1rem;
|
||
color: var(--galaxy-blue);
|
||
background: var(--white);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.skip-link:focus {
|
||
top: 1rem;
|
||
}
|
||
|
||
.arrow {
|
||
display: inline-block;
|
||
transition: transform 0.25s ease;
|
||
}
|
||
|
||
a:hover .arrow,
|
||
button:hover .arrow {
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
@keyframes panel-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-6px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
/* Page hero
|
||
========================================================================== */
|
||
|
||
.page-hero {
|
||
--hero-veil: linear-gradient(
|
||
90deg,
|
||
rgba(0, 0, 74, 0.72) 0%,
|
||
rgba(0, 0, 74, 0.45) 45%,
|
||
rgba(0, 0, 74, 0) 75%
|
||
);
|
||
|
||
margin-top: calc(-1 * var(--header-height));
|
||
padding: calc(var(--header-height) + 3rem) 0 12rem;
|
||
color: var(--white);
|
||
background:
|
||
var(--grain),
|
||
linear-gradient(180deg, rgba(0, 0, 74, 0.55) 0, rgba(0, 0, 74, 0) 10rem),
|
||
var(--hero-veil),
|
||
#00004a;
|
||
border-bottom-right-radius: var(--radius-lg);
|
||
}
|
||
|
||
/* Pages without a photo: no room needed for the figure to overlap */
|
||
.page-hero--compact {
|
||
padding-bottom: 4rem;
|
||
}
|
||
|
||
.breadcrumb ol {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin: 0 0 1rem;
|
||
padding: 0;
|
||
font-size: 0.875rem;
|
||
list-style: none;
|
||
}
|
||
|
||
.breadcrumb li + li::before {
|
||
content: "›";
|
||
margin-right: 0.5rem;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.breadcrumb a:hover {
|
||
color: var(--white);
|
||
}
|
||
|
||
.breadcrumb [aria-current] {
|
||
font-weight: 500;
|
||
color: var(--white);
|
||
}
|
||
|
||
/* Headline: Space Grotesk medium, white on dark (D.3.4) */
|
||
.page-hero__title {
|
||
max-width: 24ch;
|
||
margin: 0 0 1.25rem;
|
||
font-family: var(--font-head);
|
||
font-size: clamp(2rem, 5vw, 3.75rem);
|
||
font-weight: 500;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.02em;
|
||
text-wrap: balance;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.page-hero__lead {
|
||
max-width: 70ch;
|
||
margin: 0;
|
||
font-size: 1.0625rem;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Photo pulled up over the hero; flat, no shadow */
|
||
.page-figure {
|
||
margin: -9rem 0 4rem;
|
||
}
|
||
|
||
.page-figure img {
|
||
width: 100%;
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.page-figure figcaption {
|
||
margin-top: 0.75rem;
|
||
font-size: 0.8125rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Prose
|
||
========================================================================== */
|
||
|
||
.prose {
|
||
padding-bottom: 5rem;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.prose--no-image {
|
||
padding-top: 4rem;
|
||
}
|
||
|
||
.prose > * {
|
||
max-width: 64rem;
|
||
}
|
||
|
||
/* Galaxy Blue headline on light background (D.3.4) */
|
||
.prose h2 {
|
||
margin: 3rem 0 1rem;
|
||
font-family: var(--font-head);
|
||
font-size: clamp(1.75rem, 3vw, 2.375rem);
|
||
font-weight: 500;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.02em;
|
||
color: var(--galaxy-blue);
|
||
}
|
||
|
||
.prose h2:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.prose p {
|
||
margin: 0 0 1.25rem;
|
||
font-size: 1.0625rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Text links: colour only at rest, underline on hover and focus */
|
||
.prose a:not(.btn):hover,
|
||
.prose a:not(.btn):focus-visible {
|
||
text-decoration: underline;
|
||
text-underline-offset: 0.15em;
|
||
}
|
||
|
||
/* Cherenkov Blue fails contrast as text on white, so it is the accent bar */
|
||
.prose .highlight,
|
||
.prose blockquote {
|
||
margin: 2.5rem 0;
|
||
padding-left: 1.5rem;
|
||
font-size: 1.375rem;
|
||
font-weight: 500;
|
||
line-height: 1.35;
|
||
color: var(--galaxy-blue);
|
||
border-left: 4px solid var(--cherenkov-blue);
|
||
}
|
||
|
||
.prose blockquote p {
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.prose h3,
|
||
.prose h4,
|
||
.prose h5,
|
||
.prose h6 {
|
||
font-family: var(--font-head);
|
||
color: var(--galaxy-blue);
|
||
}
|
||
|
||
.prose li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.prose img {
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.prose pre {
|
||
padding: 1rem;
|
||
overflow-x: auto;
|
||
background: var(--moon-gray);
|
||
}
|
||
|
||
.prose code {
|
||
overflow-wrap: normal;
|
||
}
|
||
|
||
.prose table {
|
||
display: block;
|
||
overflow-x: auto;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.prose th,
|
||
.prose td {
|
||
padding: 0.75rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
.prose hr {
|
||
margin: 2rem 0;
|
||
border: 0;
|
||
border-top: 1px solid #ddd;
|
||
}
|
||
|
||
/* Placeholder pages: empty body until their content exists */
|
||
.placeholder-body {
|
||
min-height: 12rem;
|
||
}
|
||
|
||
/* Buttons
|
||
========================================================================== */
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
height: 2.75rem;
|
||
padding: 0 1.5rem;
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
/* Underline the label only: a flex container would pass it on to the arrow */
|
||
.btn:hover,
|
||
.btn:focus-visible {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn:hover .btn__label,
|
||
.btn:focus-visible .btn__label {
|
||
text-decoration: underline;
|
||
text-underline-offset: 0.15em;
|
||
}
|
||
|
||
.btn--primary {
|
||
color: var(--white);
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--galaxy-blue) 0%,
|
||
var(--cosmic-azure) 70%,
|
||
var(--cherenkov-blue) 100%
|
||
);
|
||
}
|
||
|
||
.btn--primary:hover {
|
||
filter: brightness(1.1);
|
||
}
|
||
|
||
/* Responsive page
|
||
========================================================================== */
|
||
|
||
@media (max-width: 800px) {
|
||
/* Text spans the full width here, so keep at least 50% navy everywhere */
|
||
.page-hero {
|
||
--hero-veil: linear-gradient(
|
||
90deg,
|
||
rgba(0, 0, 74, 0.72) 0%,
|
||
rgba(0, 0, 74, 0.5) 100%
|
||
);
|
||
|
||
padding-bottom: 8rem;
|
||
border-bottom-right-radius: var(--radius-md);
|
||
}
|
||
|
||
.page-hero--compact {
|
||
padding-bottom: 4rem;
|
||
}
|
||
|
||
.page-figure {
|
||
margin-top: -6rem;
|
||
}
|
||
}
|
||
|
||
/* Preferences
|
||
========================================================================== */
|
||
|
||
/* Windows High Contrast: drop the decorative hero background behind system text */
|
||
@media (forced-colors: active) {
|
||
.page-hero {
|
||
background-image: none;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
}
|
||
|
||
/* Preview frame
|
||
========================================================================== */
|
||
|
||
/* There is no site header above the hero */
|
||
.page-hero {
|
||
margin-top: 0;
|
||
padding-top: 3rem;
|
||
}
|
||
|
||
/* Sveltia wraps the image preview in a paragraph */
|
||
.page-figure p {
|
||
margin: 0;
|
||
}
|